/*
Theme Name: Web Dev Tree
Author: Juan Ignacio Falibene
Description: Tema similar a Linktree para diseñadores y desarrolladores.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: web-dev-tree
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

:root {
  --cat-all: #272727;
  --cat-1-bg: #35d580;
  --cat-2-bg: #d58035;
  --cat-3-bg: #d2d535;
  --cat-4-bg: #359ad5;
  --cat-5-bg: #d53535;
  --cat-6-bg: #8d35d5;
  --cat-7-bg: #d53585;
  --cat-8-bg: #70d535;
  --cat-9-bg: #aad535;
  --cat-10-bg: #d56d35;
  --cat-11-bg: #35d2d5;
  --cat-12-bg: #3540d5;
  --cat-13-bg: #a52a2a;
  --cat-14-bg: #b8860b;
  --cat-15-bg: #ff5733;
  --cat-16-bg: #33ff57;
  --cat-17-bg: #3357ff;
  --cat-18-bg: #ff33a1;
  --cat-19-bg: #f5b7b1;
  --cat-20-bg: #f9e79f;
  --cat-21-bg: #a2d9ce;
  --cat-22-bg: #d7bde2;
  --cat-23-bg: #ffcccb;
  --cat-24-bg: #c4e17f;
  --cat-25-bg: var(--cat-1-bg);
  --cat-26-bg: var(--cat-2-bg);
  --cat-27-bg: var(--cat-3-bg);
  --cat-28-bg: var(--cat-4-bg);
  --cat-29-bg: var(--cat-5-bg);
  --cat-30-bg: var(--cat-6-bg);
  --cat-31-bg: var(--cat-7-bg);
  --cat-32-bg: var(--cat-8-bg);
  --cat-33-bg: var(--cat-9-bg);
  --cat-34-bg: var(--cat-10-bg);
  --cat-35-bg: var(--cat-11-bg);
  --cat-36-bg: var(--cat-12-bg);
  --cat-37-bg: var(--cat-13-bg);
  --cat-38-bg: var(--cat-14-bg);
  --cat-39-bg: var(--cat-15-bg);
  --cat-40-bg: var(--cat-16-bg);
  --cat-41-bg: var(--cat-17-bg);
  --cat-42-bg: var(--cat-18-bg);
  --cat-43-bg: var(--cat-19-bg);
  --cat-44-bg: var(--cat-20-bg);
  --cat-45-bg: var(--cat-21-bg);
  --cat-46-bg: var(--cat-22-bg);
  --cat-47-bg: var(--cat-23-bg);
  --cat-48-bg: var(--cat-24-bg);
}

html {
  scroll-behavior: smooth;
}

body.webdevtree {
  background-color: #f1f1f1;
  color: #242424;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  font-size: 1em;
  font-weight: 400;
}

header.main-header,
main.main-container,
footer.main-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1rem;
  gap: 1.5em;
}

section.main-section,
section.tree-list,
section.page-section,
section.blog-section,
section.single-post {
  display: flex;
  flex-direction: column;
  gap: 2em;
  padding: 4rem 2rem;
  width: 100%;
  margin: 2rem auto;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

section.main-section,
section.tree-list,
section.blog-section {
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 100vh;
  border: 1px solid #24242420;
  border-radius: 0.5em;
  /*text-align: center;*/
  min-height: 80vh;
  /* Un poco más flexible que 100vh */
  padding: 4rem 2rem;
  /* Mucho aire arriba/abajo y a los lados */
  margin: 2rem auto;
  /* Estética Apple */
  background-color: rgba(255, 255, 255, 0.1);
  /* Fondo sutilmente traslúcido */
  backdrop-filter: blur(20px);
  /* Efecto de cristal esmerilado */
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* Borde mucho más suave */
  border-radius: 2rem;
  /* Bordes mucho más orgánicos y curvos */

  /* Sombra de profundidad muy suave */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

header.main-header h1,
header.main-header h1 {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  /* Estructura de Botón */
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  /* Bordes completamente redondeados */
  background: #ffffff;

  /* Efecto Glossy y Apple Style */
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);

  /* Sombras: una para profundidad y otra para el borde interno (glow) */
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* Refinado visual */
  backdrop-filter: blur(10px);
  /* Opcional, por si hay algo de color detrás */
  transition: all 0.3s ease;
  cursor: default;
}

/* Efecto hover sutil para mantener la estética */
header.main-header h1:hover {
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

header.main-header h2,
header.main-header h2 {
  font-size: 2rem;
  font-weight: 500;
}

footer.main-footer a,
.about-section p,
header.main-header p,
nav.main-nav ul.nav-links li.nav-link,
section.tree-list ul.categories li.category {
  text-align: center;
  max-width: 60ch;
  text-wrap: balance;
  font-size: 1em;
}

header.main-header p {
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}

a {
  text-decoration: none;
  color: #242424;
  transition: all 0.3s ease-in-out;
}

code {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Nav */

nav.main-nav ul,
section.tree-list ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}

nav.main-nav ul.nav-links,
section.tree-list ul {
  flex-direction: row;
}

nav.main-nav ul.nav-links li,
footer.main-footer a {
  display: inline-block;
  /* Asegura que el padding y transform funcionen bien */
  padding: 0.5em 1.2em;
  /* Un poco más de aire lateral para el look de botón */
  border-radius: 12px;
  /* Radio más suave, estilo iOS moderno */
  background-color: #f5f5f7;
  /* Gris claro sutil de Apple */
  color: #1d1d1f;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  /* Transición más rápida para mayor respuesta */
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* Borde casi invisible */
}

nav.main-nav ul.nav-links li:hover,
footer.main-footer a:hover {
  background-color: #ffffff;
  transform: translateY(-1px);
  /* Elevación sutil en lugar de escala */
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.1);
  color: #242424;
  /* Azul clásico de enlaces en Apple (opcional) */
}

/* Mobile Menu Toggle - Apple Style Consistency */
button.mobile-menu-toggle {
  display: none;
  /* Se activará mediante media queries */
  background: #f5f5f7;
  color: #1d1d1f;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0.6em 1em;
  /* Un poco más de área táctil (UX) */
  border-radius: 12px;
  /* Consistente con los nav-links */
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;

  /* Sombra base sutil */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

button.mobile-menu-toggle:hover,
button.mobile-menu-toggle:active {
  background-color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Mejora para feedback táctil en móviles */
button.mobile-menu-toggle:active {
  transform: scale(0.96);
  /* Efecto de pulsación */
  background-color: #ebebeb;
}

/* Tree List Home */

section.tree-list ul.tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

section.tree-list ul.categories,
section.tree-list ul.tree {
  align-self: center;
}

section.tree-list ul.categories li.category {
  display: inline-block;
  padding: 0.5em 1.2em;
  /* Padding más generoso para mejorar el click/tap */
  border-radius: 10px;
  /* Radio ligeramente menor que el H1 para jerarquía visual */
  background-color: #f5f5f7;
  color: #1d1d1f;
  font-size: 0.9rem;
  /* Un poco más pequeño que el nav principal */
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.03);
  user-select: none;
  /* Evita que se seleccione el texto al hacer muchos clicks */
}

section.tree-list ul.categories li.category:hover {
  background-color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
}

/* Estado Activo: El botón seleccionado */
section.tree-list ul.categories li.category.active {
  background-color: #ffffff;
  /* Azul distintivo de Apple para lo seleccionado */
  border-color: rgba(0, 113, 227, 0.3);
  /* Borde sutil azulado */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(0, 113, 227, 0.1);
  /* Refuerza el color seleccionado */
  transform: scale(1.02);
}

/* Efecto de pulsación al hacer click */
section.tree-list ul.categories li.category:active {
  transform: scale(0.95);
  background-color: #e8e8ed;
}

section.tree-list ul.categories li.category::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  margin-right: 0.25em;
  vertical-align: middle;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

section.tree-list ul.categories li:nth-child(1)::before {
  background-color: var(--cat-all);
}

section.tree-list ul.tree li.node {
  display: none;
  align-items: center;
  justify-content: space-between;
  min-width: 50vw;
  width: 90vw;
  margin: 0 auto;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  padding: 1em;
  border-radius: 12px;
  /* Ajustado de 1em a 12px para consistencia con botones */
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  position: relative;

  /* --- CAMBIOS PARA CONSISTENCIA --- */
  background-color: #f5f5f7;
  /* El mismo gris sutil de Apple que los botones */
  color: #1d1d1f;
  /* Gris casi negro profesional */
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* Borde suave en lugar de sólido */

  /* Sombra inicial más limpia y natural (Apple Style) */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.02),
    0 4px 6px rgba(0, 0, 0, 0.02);

  transition: all 0.3s ease-in-out;
}

/* El hover se mantiene con tu lógica de brillo, solo asegúrate de que el border sea consistente */
section.tree-list ul.tree li.node:hover {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  /* Tu efecto original preservado */
}

section.tree-list ul.tree li.node::before {
  content: "";
  opacity: 0.75;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  border-radius: 50%;
  margin-right: 0.5em;
  display: inline-flex;
  transition: all 0.3s ease-in-out;
}

section.tree-list ul.tree li.node:hover::before {
  transform: scale(1.25);
  opacity: 1;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.75;
  }

  100% {
    opacity: 1;
  }
}

section.tree-list ul.tree li.node span {
  display: inline-flex;
  margin-left: 0.25em;
  vertical-align: middle;
  color: #242424db;
  font-weight: 300;
}

section.tree-list ul.tree li.node span::before {
  content: "—";
  margin-right: 0.5em;
  margin-left: 0.25em;
  margin-top: -2px;
  font-size: 1.2em;
  line-height: 1;
  font-weight: 300;
  color: #242424;
}

section.tree-list ul.tree li.node::after {
  content: "→";
  margin-left: 0.5em;
  font-size: 1.2em;
  transition: transform 0.3s ease-in-out;
}

section.tree-list ul.tree li.node:hover::after {
  transform: rotate(-45deg);
}

section.tree-list ul.tree li.node.active {
  display: flex;
}

/* Templates */

/* Page */

section.page-section,
section.single-post {
  justify-content: center;
  align-items: center;
  text-align: left;
  min-height: auto;
}

section.page-section h2,
section.single-post h2,
article.post-card h3 {
  line-height: 125%;
  font-weight: 700;
  max-width: 65ch;
  text-align: left;
}

section.page-section h2,
section.single-post h2 {
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #1d1d1f;
  max-width: 25ch;
  /* Evita líneas demasiado largas en títulos */
  text-align: center;
  /* Centrado para el título principal */
  margin-bottom: 1rem;
}

section.page-section h2 {
  font-size: 3rem;
}

section.single-post h2 {
  font-size: 2.5rem;
}

article.post-card h3 {
  font-size: 1.75em;
  line-height: 1.15;
  margin-bottom: 0.25em;
}

section.page-section p,
section.single-post p,
article.post-card p {
  font-size: 1.125rem;
  /* Un poco más grande para mejorar lectura */
  line-height: 1.6;
  font-weight: 400;
  color: #424245;
  /* Gris Apple para el cuerpo de texto */
  max-width: 65ch;
  /* Medida ideal de lectura (Golden Ratio) */
  text-align: left;
  margin-bottom: 1.5rem;
}

/* 4. Enlaces dentro de párrafos (Consistencia) */
section.single-post p a,
section.page-section p a {
  color: #1d1d1f;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

section.single-post p a:hover,
section.page-section p a:hover {
  text-decoration: underline;
  color: #1d1d1f;
}

/* Home == Blog */

section.blog-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0;
}

section.blog-section div.blog-post-list {
  width: 70%;
  min-height: 100vh;
  padding: 0 1em;
}

section.blog-section sidebar.blog-post-sidebar {
  display: flex;
  flex-direction: column;
  width: 30%;
  min-height: 100vh;
  padding: 1em;
  gap: 0.5em;
}

section.blog-section div.blog-post-list.loop {
  border-right: 1px solid #24242420;
}

section.blog-section div.blog-post-list.archive {
  border-left: 1px solid #24242420;
}

/* Archives: Articles */

article.post-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.5em 1.5em 1.5em 0.25em;
  gap: 1.5em;
  text-align: left;
}

article.post-card div.featured-image img {
  width: 100%;
  object-fit: cover;
  border-radius: 0.5em;
  margin-top: 0;
  vertical-align: top;
}

article.post-card ul.post-tags {
  display: flex;
  flex-direction: row;
  gap: 0.25em;
  margin: 0.5em 0;
  list-style: none;
}

article.post-card p.post-categories,
article.post-card ul.post-tags li a,
section.widget_categories ul.wp-block-categories-list li,
section.widget_tag_cloud p a,
section.widget_archive ul.wp-block-archives-list li {
  font-size: 0.875em;
  width: fit-content;
  border: 1px solid #d2d535;
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
  opacity: 0.8;
  scale: 1;
  margin: 0.5em 0.25em;
  transition: all 0.3s ease;
}

section.widget_archive ul.wp-block-archives-list li::marker {
  color: transparent;
}

article.post-card p.post-categories:hover,
article.post-card ul.post-tags li a:hover,
section.widget_categories ul.wp-block-categories-list li:hover,
section.widget_tag_cloud p a:hover,
section.widget_archive ul.wp-block-archives-list li:hover {
  opacity: 1;
  scale: 1.05;
}

article.post-card time.post-updated {
  font-size: 0.875em;
  padding: 0;
  color: #777;
  display: inline-block;
  margin-right: 0.5em;
}

article.post-card time.post-updated::after {
  content: "—";
  margin-left: 0.5em;
  color: #ccc;
}

article.post-card span.post-by-author {
  font-size: 0.875em;
  padding: 0;
  color: #777;
  display: inline-block;
  margin-bottom: 0.75em;
}

article.post-card header p.post-categories {
  margin-top: 0.5em;
  margin-bottom: 1em;
}

article.post-card .entry-content p:not(.read-more) {
  margin-bottom: 1.5em;
  color: #444;
}

ul.wp-block-latest-posts li {
  margin: 0.5em 0;
}

ul.wp-block-latest-posts li a,
.archive-title {
  font-size: 1.25em;
  padding: 0.5em;
  color: #242424;
  font-weight: 600;
  line-height: 150%;
}

article.post-card span.post-by-author::before {
  content: "by";
}

article.post-card span.post-by-author a,
ul.wp-block-latest-posts li a:hover {
  text-decoration: underline;
}

article.post-card p.read-more a.button-link {
  display: inline-block;
  background-color: #272727;
  color: #ffffff !important;
  font-size: 0.85rem;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

article.post-card p.read-more a.button-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
  background-color: #1d1d1f;
  text-decoration: none !important;
}

article.post-card span.edit-link {
  font-size: 0.75em;
}

/* Single Post */

article.single-post-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* WP Classes */

.wp-block-calendar table caption,
.widget_block h4 {
  font-weight: 500;
  color: #242424;
  margin-bottom: 0.5em;
}

.wp-block-calendar td {
  padding: 0.5em;
}

.wp-block-calendar table td a {
  color: #f1f1f1;
  background-color: #242424;
  padding: 0.25em;
  border-radius: 50%;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.wp-block-calendar table td a:hover {
  opacity: 1;
}

section.widget_categories,
.wp-block-tag-cloud p {
  text-align: left;
}

section.widget_categories ul.wp-block-categories-list,
section.widget_tag_cloud {
  box-sizing: border-box;
  display: inline-block;
  list-style: none;
  text-align: left;
}

/* Sidebar Author List */
.widget_author_list h4 {
  font-weight: 600;
  margin-bottom: 1em;
  font-size: 1.5em;
}

ul.author-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

li.author-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.25em;
}

.author-avatar img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 2px solid #e9e9e9;
}

.author-details {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75em;
}

.author-details h4.author-name {
  font-size: 1.15em;
  margin-bottom: 0;
}

.author-details p.author-bio {
  font-size: 0.9em;
  color: #555;
  line-height: 1.5;
  margin-bottom: 0;
}

.author-details p.author-post-count {
  font-size: 0.85em;
  font-weight: 600;
  display: inline-block;
  background: #e9e9e9;
  padding: 0.25em 0.75em;
  border-radius: 1em;
}

.author-details a.author-weblink {
  font-size: 0.85em;
  font-weight: 500;
  color: #242424;
  text-decoration: underline;
}

.author-details a.author-weblink:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* Main Footer */

footer a img.img-profile {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  margin-right: 0.25em;
  vertical-align: middle;
  display: inline-block;
  background-color: #d2d535;
  padding: 0.25em;
  transition: all 0.3s ease-in-out;
}

footer a:hover img.img-profile {
  transform: scale(2.5) translateX(-0.25em) translateY(-0.25em);
  margin-right: 1em;
  box-shadow: 0px 0px 10px rgba(231, 243, 10, 1);
}

@media screen and (max-width: 768px) {
  body.webdevtree {
    padding: 0.5rem;
  }

  section.main-section,
  section.tree-list,
  section.blog-section {
    border: none;
  }

  nav.main-nav {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  button.mobile-menu-toggle {
    display: inline-block;
  }

  nav.main-nav ul.nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f1f1f1;
    padding: 1em;
    border-radius: 0.5em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #24242430;
    z-index: 100;
    min-width: 250px;
  }

  nav.main-nav ul.nav-links.active {
    display: flex;
  }

  nav.main-nav ul.nav-links li {
    width: 100%;
    text-align: center;
  }

  header.main-header,
  main.main-container,
  footer.main-footer,
  section.main-section,
  section.tree-list,
  section.page-section,
  section.blog-section,
  section.single-post {
    padding: 0.5rem;
  }

  section.tree-list ul.tree li.node {
    box-shadow: none;
    border: 1px solid #24242430;
    width: 95vw;
    min-width: 95vw;
    max-width: 95vw;
    padding: 1em 0.5em;
    text-align: left;
  }

  section.tree-list ul.tree li.node::before {
    width: 0.5em;
    height: 0.5em;
    flex-shrink: 0;
  }

  section.tree-list ul.tree li.node span::before {
    display: none;
  }

  section.tree-list ul.tree li.node span {
    text-align: left;
  }

  section.blog-section {
    flex-direction: column;
  }

  section.blog-section div.blog-post-list,
  section.blog-section sidebar.blog-post-sidebar {
    width: 100%;
  }

  article.post-card {
    padding: 0.25em;
  }

  article.post-card h3 {
    font-size: 1.4em;
  }

  section.blog-section div.blog-post-list.loop {
    border-right: none;
  }

  section.blog-section div.blog-post-list.archive {
    border-left: none;
  }
}
/* Resource Landing Page */
.resource-landing .single-post-content {
  padding: 2rem 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.resource-category-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #f5f5f7;
  color: #1d1d1f;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.resource-category-badge a {
  color: inherit;
}

.resource-summary p {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #424245;
  text-align: center;
  margin-bottom: 3rem;
  font-style: italic;
}

.redirect-notice {
  background: #f5f5f7;
  padding: 2.5rem;
  border-radius: 24px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 500px;
}

.redirect-notice p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: #86868b;
}

#countdown {
  font-weight: 700;
  color: #1d1d1f;
}

.resource-button {
  display: inline-block;
  background: #272727;
  color: #ffffff !important;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.resource-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  background: #1d1d1f;
  text-decoration: none !important;
}

.resource-button:active {
  transform: scale(0.98);
}