/* ═══════════════════════════════════════════════════
   TELCOMEDGE — MASTER CSS — IMPROVED
   ═══════════════════════════════════════════════════ */

/* ─── 0. FONT IMPORT ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

/* ─── 0B. CSS VARIABLES ──────────────────────────── */
:root {
  --te-navy:    #071428;
  --te-cyan:    #00C8DC;
  --te-teal:    #0A5C6E;
  --te-light:   #f7f9fb;
  --te-card:    #ffffff;
  --te-text:    #1a2332;
  --te-muted:   #778899;
  --te-border:  #d0e4ea;
  --te-accent-bg: #e8f7fa;
  --te-radius:  8px;
  --te-font-ui:   'Sora', system-ui, sans-serif;
  --te-font-body: 'Source Serif 4', Georgia, serif;
  --te-shadow-sm: 0 2px 16px rgba(0,0,0,0.07);
  --te-shadow-lg: 0 6px 28px rgba(0,200,220,0.14);
  --te-transition: 0.22s ease;
}

/* ─── 1. HEADER ─────────────────────────────────── */
.site-header {
  background-color: var(--te-navy) !important;
  border-bottom: 3px solid var(--te-cyan) !important;
  padding: 12px 0 !important;
}
.site-header .site-branding {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 12px;
}
.site-header .site-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  font-family: var(--te-font-ui) !important;
}
.site-header .site-title a {
  color: #ffffff !important;
}
.site-header .site-description {
  display: none !important;
}

/* ─── 2. NAVIGATION ──────────────────────────────── */
.main-navigation a {
  color: #ccddee !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--te-font-ui) !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  transition: color var(--te-transition) !important;
}
.main-navigation a:hover {
  color: var(--te-cyan) !important;
}

/* ─── 3. HERO BANNER ─────────────────────────────── */
#main::before,
#content::before,
.site-content::before,
.site-main::before {
  content: "Telecom  ·  Enterprise  ·  AI — A Practitioner's Voice" !important;
  display: block !important;
  background: linear-gradient(135deg, #071428 0%, #0a1f3a 100%) !important;
  color: #8ab4cc !important;
  text-align: center !important;
  padding: 20px 40px !important;
  font-size: 11px !important;
  font-family: var(--te-font-ui) !important;
  letter-spacing: 3px !important;
  line-height: 1.6 !important;
  border-bottom: 1px solid #0d2a4a !important;
  text-transform: uppercase !important;
}

/* ─── 4. BODY ────────────────────────────────────── */
body {
  background-color: var(--te-light) !important;
  font-family: var(--te-font-body) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* ─── 5. ARTICLE IMAGES ─────────────────────────── */
.entry-post-thumbnail,
.post-thumbnail,
figure.post-thumbnail,
.ct-blog-post .ct-image-container,
.ct-blog-post figure {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
  display: block !important;
  overflow: hidden !important;
}
.entry-post-thumbnail img,
.post-thumbnail img,
.wp-post-image,
.ct-blog-post .ct-image-container img,
.ct-blog-post figure img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  border-radius: var(--te-radius) var(--te-radius) 0 0 !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}
.ct-blog-post:hover .wp-post-image,
.ct-blog-post:hover .ct-image-container img {
  transform: scale(1.03) !important;
}

/* ─── 6. ARTICLE CARDS ──────────────────────────── */
.ct-blog-post,
.post-card,
article.post {
  box-shadow: var(--te-shadow-sm) !important;
  border-radius: var(--te-radius) !important;
  overflow: hidden !important;
  margin-bottom: 28px !important;
  background: var(--te-card) !important;
  transition: box-shadow var(--te-transition), transform var(--te-transition) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
}
.ct-blog-post:hover,
article.post:hover {
  box-shadow: var(--te-shadow-lg) !important;
  transform: translateY(-3px) !important;
}

/* Card inner padding */
.ct-blog-post .ct-blog-entry,
.ct-blog-post .entry-summary,
.ct-blog-post .entry-content-wrap {
  padding: 20px 24px 20px !important;
}

/* ─── 7. FEATURED FIRST ARTICLE ─────────────────── */
.ct-blog-post:first-child,
article.post:first-child {
  border-left: 4px solid var(--te-cyan) !important;
}
.ct-blog-post:first-child .entry-title a,
article.post:first-child .entry-title a {
  font-size: 24px !important;
}
.ct-blog-post:first-child .entry-meta::before,
article.post:first-child .entry-meta::before {
  content: "LATEST  · " !important;
  color: var(--te-cyan) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  font-family: var(--te-font-ui) !important;
}

/* ─── 8. POST TITLES ─────────────────────────────── */
.entry-title,
.entry-title a {
  font-family: var(--te-font-ui) !important;
}
.entry-title a {
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
  color: var(--te-text) !important;
  transition: color var(--te-transition) !important;
  text-decoration: none !important;
}
.entry-title a:hover {
  color: var(--te-cyan) !important;
}

/* ─── 9. POST META ───────────────────────────────── */
.entry-meta {
  font-size: 11px !important;
  color: var(--te-muted) !important;
  margin-top: 8px !important;
  font-family: var(--te-font-ui) !important;
  letter-spacing: 0.3px !important;
}

/* ─── 10. CATEGORY LABELS ───────────────────────── */
.cat-links a,
.entry-categories a {
  background-color: var(--te-accent-bg) !important;
  color: var(--te-teal) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: var(--te-font-ui) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  text-decoration: none !important;
  transition: all var(--te-transition) !important;
  display: inline-block !important;
  margin-bottom: 6px !important;
}
.cat-links a:hover,
.entry-categories a:hover {
  background-color: var(--te-cyan) !important;
  color: #ffffff !important;
}

/* ─── 11. ARTICLE CONTENT ───────────────────────── */
.entry-content {
  font-size: 17px !important;
  line-height: 1.9 !important;
  color: var(--te-text) !important;
  font-family: var(--te-font-body) !important;
}
.entry-content h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  font-family: var(--te-font-ui) !important;
  color: var(--te-navy) !important;
  margin-top: 40px !important;
  margin-bottom: 14px !important;
  border-left: 4px solid var(--te-cyan) !important;
  padding-left: 14px !important;
  line-height: 1.3 !important;
}
.entry-content h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  font-family: var(--te-font-ui) !important;
  color: var(--te-teal) !important;
  margin-top: 30px !important;
  margin-bottom: 10px !important;
}
.entry-content h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--te-font-ui) !important;
  color: var(--te-text) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-top: 24px !important;
}
.entry-content p {
  margin-bottom: 22px !important;
}
.entry-content a {
  color: var(--te-teal) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: var(--te-cyan) !important;
  transition: color var(--te-transition) !important;
}
.entry-content a:hover {
  color: var(--te-cyan) !important;
}
.entry-content blockquote {
  border-left: 4px solid var(--te-cyan) !important;
  background: linear-gradient(135deg, #f0f8fa 0%, #e8f5f8 100%) !important;
  padding: 18px 24px !important;
  margin: 28px 0 !important;
  border-radius: 0 var(--te-radius) var(--te-radius) 0 !important;
  color: var(--te-teal) !important;
  font-style: italic !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  position: relative !important;
}
.entry-content blockquote::before {
  content: "\201C" !important;
  position: absolute !important;
  top: -8px !important;
  left: 16px !important;
  font-size: 56px !important;
  color: var(--te-cyan) !important;
  font-family: Georgia, serif !important;
  line-height: 1 !important;
  opacity: 0.4 !important;
}
.entry-content ul,
.entry-content ol {
  padding-left: 24px !important;
  margin-bottom: 22px !important;
}
.entry-content ul li,
.entry-content ol li {
  margin-bottom: 10px !important;
  line-height: 1.75 !important;
}
.entry-content ul li::marker {
  color: var(--te-cyan) !important;
}

/* Code blocks */
.entry-content code {
  background: #f0f4f8 !important;
  color: var(--te-teal) !important;
  font-size: 14px !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  font-family: 'Courier New', monospace !important;
  border: 1px solid var(--te-border) !important;
}
.entry-content pre {
  background: var(--te-navy) !important;
  color: #a8d8e0 !important;
  padding: 20px !important;
  border-radius: var(--te-radius) !important;
  overflow-x: auto !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  border-left: 4px solid var(--te-cyan) !important;
  margin-bottom: 24px !important;
}
.entry-content pre code {
  background: none !important;
  border: none !important;
  color: inherit !important;
  padding: 0 !important;
}

/* Horizontal rule */
.entry-content hr {
  border: none !important;
  border-top: 2px solid var(--te-border) !important;
  margin: 36px 0 !important;
  position: relative !important;
}

/* ─── 12. READ MORE ──────────────────────────────── */
.more-link,
.read-more-link {
  color: var(--te-teal) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  font-family: var(--te-font-ui) !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid var(--te-cyan) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  transition: color var(--te-transition) !important;
  padding-bottom: 1px !important;
}
.more-link:hover {
  color: var(--te-cyan) !important;
}

/* ─── 13. SIDEBAR WIDGET TITLES ─────────────────── */
.widget-title,
.widgettitle {
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: var(--te-font-ui) !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--te-teal) !important;
  border-bottom: 2px solid var(--te-cyan) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
}

/* ─── 14. TAG CLOUD ──────────────────────────────── */
.tag-cloud-link {
  background: var(--te-accent-bg) !important;
  border: 1px solid #b0dde6 !important;
  color: var(--te-teal) !important;
  padding: 4px 11px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-family: var(--te-font-ui) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin: 3px 2px !important;
  transition: all var(--te-transition) !important;
}
.tag-cloud-link:hover {
  background: var(--te-cyan) !important;
  color: #ffffff !important;
  border-color: var(--te-cyan) !important;
  transform: translateY(-1px) !important;
}

/* ─── 15. ARTICLE TAGS ───────────────────────────── */
.post-tags a,
.entry-tags a,
.tags-links a,
[rel="tag"] {
  background: var(--te-accent-bg) !important;
  border: 1px solid #b0dde6 !important;
  color: var(--te-teal) !important;
  padding: 3px 11px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-family: var(--te-font-ui) !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin: 3px 2px !important;
  transition: all var(--te-transition) !important;
}
.post-tags a:hover,
.entry-tags a:hover {
  background: var(--te-cyan) !important;
  color: #ffffff !important;
}

/* ─── 16. SUBSCRIBE WIDGET ───────────────────────── */
.widget_blog_subscription input[type="email"],
.jetpack_subscription_widget input[type="email"] {
  border: 1.5px solid var(--te-border) !important;
  border-radius: 4px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-family: var(--te-font-ui) !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  transition: border-color var(--te-transition) !important;
  outline: none !important;
}
.widget_blog_subscription input[type="email"]:focus,
.jetpack_subscription_widget input[type="email"]:focus {
  border-color: var(--te-cyan) !important;
}
.widget_blog_subscription input[type="submit"],
.jetpack_subscription_widget input[type="submit"] {
  background-color: var(--te-teal) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 9px 20px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: var(--te-font-ui) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background var(--te-transition) !important;
}
.widget_blog_subscription input[type="submit"]:hover,
.jetpack_subscription_widget input[type="submit"]:hover {
  background-color: var(--te-cyan) !important;
}

/* ─── 17. PAGINATION ─────────────────────────────── */
.page-numbers {
  background: var(--te-card) !important;
  border: 1.5px solid var(--te-border) !important;
  color: var(--te-teal) !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--te-font-ui) !important;
  text-decoration: none !important;
  transition: all var(--te-transition) !important;
}
.page-numbers.current {
  background: var(--te-teal) !important;
  color: #ffffff !important;
  border-color: var(--te-teal) !important;
}
.page-numbers:hover {
  background: var(--te-cyan) !important;
  color: #ffffff !important;
  border-color: var(--te-cyan) !important;
}

/* ─── 18. HIDE RATINGS ───────────────────────────── */
[class*="rating"],
[class*="Rating"],
[id*="rating"],
[id*="Rating"],
.cr-rating,
.cr-widget,
.cr-icon,
.post-rating,
.star-rating,
.wp-review-total-wrapper,
.review-total-box {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ─── 19. HIDE AUTHOR BOX ────────────────────────── */
.ct-author-box,
.ct-author-box-wrapper,
.ct-post-author,
.ct-post-author-box,
.ct-widget-author-box,
.author-box,
.author-section,
.post-author-section,
.entry-author-wrapper,
.author-card,
.author-widget,
[data-id="author-box"] {
  display: none !important;
}

/* ─── 20. HIDE POST NAVIGATION ───────────────────── */
.post-navigation,
.post-navigation.navigation,
.nav-links,
.navigation.post-navigation,
.ct-post-navigation,
.entry-navigation,
.prev-next-navigation,
[class*="post-nav"],
[class*="post-navigation"],
.nav-previous,
.nav-next,
.prev-post,
.next-post,
a[rel="prev"],
a[rel="next"] {
  display: none !important;
}

/* ─── 21. HIDE TRENDING AND RECENT POSTS ─────────── */
.widget_jetpack_top_posts_widget,
.widget_top-posts,
.widget_recent_entries,
.jp-relatedposts,
#wpcom-trending-posts,
.ct-trending-bar,
.ct-trending-posts-bar,
.ct-trending-posts,
.trending-bar,
.trending-now,
[class*="trending-bar"],
[class*="trending_bar"],
[class*="ct-trending"],
[id*="ct-trending"],
.widget_trending_posts,
.widget-trending-posts,
[id*="trending_posts"],
[class*="trending_posts"] {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* ─── 22. HIDE LIKE BUTTON ───────────────────────── */
.sd-like,
.sd-block.sd-like,
.sd-like-widget,
#like-post-wrapper,
#likes-other-gravatars,
.jetpack-likes-widget-wrapper,
.jetpack-likes-widget,
.likes-master,
.wpl-button,
.wpl-likebox,
[id*="like-post"],
[class*="jetpack-like"],
[class*="likes-widget"],
iframe[src*="likes"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* ─── 23. RESTORE SHARE BUTTONS ─────────────────── */
.sharedaddy,
.sd-content {
  display: block !important;
}
.sharedaddy {
  margin-top: 32px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--te-border) !important;
}

/* ─── 24. HIDE COMMENTS HEADING ─────────────────── */
#comments h2,
#comments h1,
#comments h3,
.comments-title {
  display: none !important;
}

/* ─── 25. COMMENT FORM ───────────────────────────── */
#respond h3,
#respond .comment-reply-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: var(--te-font-ui) !important;
  color: var(--te-teal) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
#respond .comment-form-comment textarea,
#respond .comment-form input[type="text"],
#respond .comment-form input[type="email"],
#respond .comment-form input[type="url"] {
  border: 1.5px solid var(--te-border) !important;
  border-radius: 6px !important;
  padding: 12px !important;
  font-size: 15px !important;
  font-family: var(--te-font-body) !important;
  width: 100% !important;
  transition: border-color var(--te-transition) !important;
  outline: none !important;
}
#respond .comment-form-comment textarea:focus,
#respond .comment-form input:focus {
  border-color: var(--te-cyan) !important;
}
#respond .submit,
#respond input[type="submit"] {
  background-color: var(--te-teal) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 28px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: var(--te-font-ui) !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background var(--te-transition) !important;
}
#respond input[type="submit"]:hover {
  background-color: var(--te-cyan) !important;
}

/* ─── 26. RESTORE COMMENT ELEMENTS ──────────────── */
.comment-meta,
.comment-metadata,
li.comment footer,
.comment footer {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-height: auto !important;
  color: var(--te-muted) !important;
  font-family: var(--te-font-ui) !important;
  font-size: 12px !important;
}
.comment footer::after,
li.comment footer::after {
  content: none !important;
  display: none !important;
}

/* ─── 27. FOOTER ─────────────────────────────────── */
.site-footer,
.ct-footer,
[class*="site-footer"],
[id*="site-footer"] {
  background-color: var(--te-navy) !important;
  border-top: 3px solid var(--te-cyan) !important;
  min-height: 80px !important;
  padding: 28px 20px !important;
  text-align: center !important;
  display: block !important;
}
.site-footer a,
.ct-footer a {
  color: var(--te-cyan) !important;
  text-decoration: none !important;
  transition: color var(--te-transition) !important;
}
.site-footer a:hover,
.ct-footer a:hover {
  color: #ffffff !important;
}
.site-info,
.ct-footer-copyright,
.footer-copyright,
[class*="footer-credit"],
[class*="powered-by"],
[class*="wordpress"] {
  display: none !important;
}
.site-footer::after,
.ct-footer::after {
  content: "© 2026 TelcomEdge  ·  Telecom  ·  Enterprise  ·  AI — A Practitioner's Voice  ·  prasanna@telcomedge.com" !important;
  display: block !important;
  text-align: center !important;
  color: #4d6680 !important;
  font-size: 11px !important;
  font-family: var(--te-font-ui) !important;
  padding: 12px 20px !important;
  line-height: 2.2 !important;
  letter-spacing: 0.8px !important;
}

/* ─── 28. ABOUT PAGE ─────────────────────────────── */
.page-id-2 .entry-content .wp-block-image,
.page-id-2 .entry-content figure {
  float: left !important;
  width: 200px !important;
  height: 200px !important;
  margin: 0 30px 20px 0 !important;
}
.page-id-2 .entry-content .wp-block-image img,
.page-id-2 .entry-content figure img {
  width: 200px !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 3px solid var(--te-cyan) !important;
  display: block !important;
}
.page-id-2 .entry-content::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}
.page-id-2 .entry-content p {
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: var(--te-text) !important;
  margin-bottom: 16px !important;
}
.page-id-2 .entry-content em {
  color: var(--te-teal) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}
.page-id-2 .sharedaddy {
  display: none !important;
}
.page-id-2 .wp-block-columns {
  align-items: flex-start !important;
  gap: 30px !important;
}
.page-id-2 .wp-block-column:first-child img {
  width: 100% !important;
  height: auto !important;
  border-radius: 50% !important;
  border: 3px solid var(--te-cyan) !important;
  display: block !important;
}
.page-id-2 .wp-block-column:last-child p {
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: var(--te-text) !important;
  margin-bottom: 16px !important;
}
.page-id-2 .entry-content img {
  display: block !important;
  width: 180px !important;
  height: 180px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 3px solid var(--te-cyan) !important;
  margin: 0 auto 24px auto !important;
  box-shadow: 0 0 0 6px rgba(0,200,220,0.12) !important;
}

/* ─── 29. SINGLE POST — ARTICLE HEADER ───────────── */
.single .entry-header {
  margin-bottom: 32px !important;
}
.single .entry-title {
  font-size: 32px !important;
  font-weight: 700 !important;
  font-family: var(--te-font-ui) !important;
  color: var(--te-navy) !important;
  line-height: 1.28 !important;
  margin-bottom: 16px !important;
}
.single .entry-meta {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--te-border) !important;
  margin-bottom: 28px !important;
}

/* ─── 30. GLOSSARY PAGE IMPROVEMENTS ────────────── */
.page .entry-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 15px !important;
  margin-bottom: 28px !important;
  border-radius: var(--te-radius) !important;
  overflow: hidden !important;
}
.page .entry-content table th {
  background-color: var(--te-navy) !important;
  color: var(--te-cyan) !important;
  font-family: var(--te-font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  text-align: left !important;
}
.page .entry-content table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--te-border) !important;
  color: var(--te-text) !important;
  vertical-align: top !important;
}
.page .entry-content table tr:nth-child(even) td {
  background-color: #f4f8fa !important;
}
.page .entry-content table tr:hover td {
  background-color: var(--te-accent-bg) !important;
}

/* ─── 31. READING PROGRESS BAR ───────────────────── */
.single body::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--te-cyan), var(--te-teal)) !important;
  z-index: 9999 !important;
  width: 100% !important;
  animation: readingProgress linear !important;
  animation-timeline: scroll() !important;
  transform-origin: left !important;
}

/* ─── 32. SIDEBAR ENHANCEMENTS ───────────────────── */
.widget {
  background: var(--te-card) !important;
  border-radius: var(--te-radius) !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
  box-shadow: var(--te-shadow-sm) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
}

/* ─── 33. SKIP LINK / ACCESSIBILITY ─────────────── */
.skip-link:focus {
  background: var(--te-cyan) !important;
  color: var(--te-navy) !important;
  font-family: var(--te-font-ui) !important;
  font-weight: 700 !important;
}

/* ─── 34. SELECTION COLOR ────────────────────────── */
::selection {
  background-color: rgba(0, 200, 220, 0.2) !important;
  color: var(--te-navy) !important;
}

/* ─── 35. MOBILE RESPONSIVE ─────────────────────── */
@media (max-width: 768px) {
  .site-header .site-title { font-size: 18px !important; }
  .entry-title a { font-size: 17px !important; }
  .ct-blog-post:first-child .entry-title a { font-size: 20px !important; }
  .single .entry-title { font-size: 24px !important; }
  .entry-content { font-size: 16px !important; line-height: 1.8 !important; }
  .entry-content h2 { font-size: 19px !important; }
  .entry-content h3 { font-size: 16px !important; }
  .entry-post-thumbnail img,
  .post-thumbnail img,
  .wp-post-image { height: 200px !important; }
  #main::before,
  #content::before,
  .site-content::before,
  .site-main::before {
    font-size: 9px !important;
    padding: 14px 20px !important;
    letter-spacing: 1.5px !important;
  }
  .page-id-2 .entry-content .wp-block-image,
  .page-id-2 .entry-content figure {
    float: none !important;
    margin: 0 auto 20px auto !important;
  }
  .widget {
    padding: 16px !important;
  }
}
@media (max-width: 480px) {
  .entry-post-thumbnail img,
  .post-thumbnail img { height: 180px !important; }
  .site-footer::after { font-size: 10px !important; padding: 10px 12px !important; }
  .single .entry-title { font-size: 21px !important; }
}