/*
Theme Name: Shelbi Joseph
Text Domain: shelbi
Theme URI: https://illusions.com.mx/
Description: Tema personalizado para el fotógrafo Shelbi Joseph.
Version: 3.0
Author: aprendamos.org
Author URI: https://www.aprendamos.org/
*/

/* ========================================
 VARIABLES POR DEFECTO
 (El Customizer las sobrescribe con wp_add_inline_style)
 ========================================*/
:root {
--shelbi-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--shelbi-font-size-base: 16px;

--shelbi-body-bg: #F5F3EF;
--shelbi-text-color: #2A2A2A;

--shelbi-navbar-transparent-text: #FFFFFF;
--shelbi-navbar-scrolled-bg: #F5F3EF;
--shelbi-navbar-scrolled-text: #2A2A2A;

--shelbi-submenu-bg: #FFFFFF;
--shelbi-submenu-color: #2A2A2A;

--shelbi-footer-bg: #2A2A2A;
--shelbi-footer-color: #F5F3EF;

--shelbi-accent: #8A8A8A;
--shelbi-social-color: #8A8A8A;

--shelbi-comment-input-bg: #FFFFFF;
--shelbi-comment-input-color: #2A2A2A;
--shelbi-comment-button-bg: #2A2A2A;

--shelbi-navbar-height: 72px;
}

/* ========================================
 BASE
 ========================================*/
html {
scroll-behavior: smooth;
}

body {
overflow-x: hidden;
font-family: var(--shelbi-font-family);
font-size: var(--shelbi-font-size-base);
line-height: 1.65;
color: var(--shelbi-text-color);
background-color: var(--shelbi-body-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a {
color: var(--shelbi-accent);
text-decoration: none;
transition: opacity 0.2s ease;
}

a:hover,
a:focus {
opacity: 0.75;
}

img {
max-width: 100%;
height: auto;
}

/* ========================================
 ACCESIBILIDAD
 ========================================*/
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 9999;
padding: 0.75rem 1rem;
background: #fff;
color: #000;
text-decoration: none;
border-radius: 0 0 0.25rem 0;
}
.skip-link:focus {
left: 0;
outline: 2px solid var(--shelbi-accent);
}
.screen-reader-text:focus {
clip: auto !important;
height: auto;
width: auto;
display: block;
}

/* ========================================
 NAVBAR
 ========================================*/
.shelbi-navbar {
background-color: transparent;
padding: 1.1rem 0;
border: 0;
box-shadow: none;
transition:
background-color 0.4s ease,
box-shadow 0.4s ease,
padding 0.3s ease;
}

/* En estado sólido (scrolled) el fondo aparece */
.shelbi-navbar.scrolled {
background-color: var(--shelbi-navbar-scrolled-bg);
padding: 0.85rem 0;
}

.shelbi-navbar-inner {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
max-width: 1760px;
margin: 0 auto;
padding-left: 3rem;
padding-right: 3rem;
}

/* --- Texto del navbar ---*/
.shelbi-navbar .nav-link,
.shelbi-navbar .navbar-brand,
.shelbi-navbar .navbar-toggler,
.shelbi-navbar .shelbi-search .shelbi-search-toggle,
.shelbi-navbar .shelbi-socials a {
color: var(--shelbi-navbar-scrolled-text);
transition: color 0.4s ease, text-shadow 0.4s ease, opacity 0.2s ease;
}

/* Estado transparente: texto claro y sombra suave para legibilidad sobre fotos*/
.shelbi-navbar-transparent-start:not(.scrolled) .nav-link,
.shelbi-navbar-transparent-start:not(.scrolled) .navbar-brand,
.shelbi-navbar-transparent-start:not(.scrolled) .navbar-toggler,
.shelbi-navbar-transparent-start:not(.scrolled) .shelbi-search .shelbi-search-toggle,
.shelbi-navbar-transparent-start:not(.scrolled) .shelbi-socials a {
color: var(--shelbi-navbar-transparent-text);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.shelbi-navbar .nav-link:hover,
.shelbi-navbar .nav-link:focus {
opacity: 0.7;
}

.shelbi-navbar .nav-link.active {
opacity: 1;
font-weight: 500;
}

/* --- Título del sitio como logo en texto ---*/
.shelbi-site-title {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: color 0.4s ease, opacity 0.2s ease;
}

.shelbi-site-title:hover,
.shelbi-site-title:focus {
opacity: 0.75;
text-decoration: none;
}

/* --- Menú de navegación ---*/
.shelbi-navbar .navbar-nav .nav-link {
font-size: 0.95rem;
letter-spacing: 0.03em;
padding: 0.5rem 0.75rem;
}

/* --- Submenús (siempre claros) ---*/
.shelbi-navbar .dropdown-menu {
background-color: var(--shelbi-submenu-bg);
border: none;
border-radius: 0.25rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
padding: 0.5rem 0;
margin-top: 0.5rem;
min-width: 200px;
}

.shelbi-navbar .dropdown-item {
color: var(--shelbi-submenu-color);
font-size: 0.92rem;
padding: 0.55rem 1.25rem;
transition: background-color 0.15s ease;
}

.shelbi-navbar .dropdown-item:hover,
.shelbi-navbar .dropdown-item:focus {
background-color: rgba(0, 0, 0, 0.045);
color: var(--shelbi-submenu-color);
opacity: 1;
}

/* Toggler minimalista*/
.shelbi-navbar .navbar-toggler {
border: none;
padding: 0.25rem 0.5rem;
}

.shelbi-navbar .navbar-toggler:focus {
box-shadow: none;
}

/* --- Columna derecha (búsqueda + redes) ---*/
.shelbi-right {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}

/* --- Iconos y posiciones de Iconos ---*/
.shelbi-navbar .navbar-toggler-icon {
background-image: none;
display: inline-block;
width: 1.5em;
height: 1.5em;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M4 7h22v2H4zM4 14h22v2H4zM4 21h22v2H4z'/></svg>");
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M4 7h22v2H4zM4 14h22v2H4zM4 21h22v2H4z'/></svg>");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}

/* ========================================
 BUSCADOR
 ========================================*/
.shelbi-search {
position: relative;
display: inline-block;
}

.shelbi-search .input-group {
display: flex;
align-items: center;
gap: 0;
}

.shelbi-search input[type="search"] {
width: 0;
min-width: 0;
max-width: 200px;
padding: 0.35rem 0;
font-size: 0.875rem;
border: none;
border-bottom: 1px solid currentColor;
border-radius: 0;
background: transparent;
color: inherit;
opacity: 0;
transition: width 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}

.shelbi-search.show input[type="search"],
.shelbi-search:hover input[type="search"],
.shelbi-search input[type="search"]:focus {
width: 180px;
padding: 0.35rem 0.5rem;
opacity: 1;
outline: none;
}

.shelbi-search input[type="search"]::placeholder {
color: currentColor;
opacity: 0.55;
}

.shelbi-search .shelbi-search-toggle {
border: none;
background: transparent;
color: inherit;
padding: 0.25rem 0.4rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
transition: opacity 0.2s ease;
}

.shelbi-search .shelbi-search-toggle:hover,
.shelbi-search .shelbi-search-toggle:focus {
opacity: 0.7;
outline: none;
}

/* ========================================
 REDES SOCIALES (navbar)
 ========================================*/
.shelbi-socials {
display: flex;
align-items: center;
gap: 0.6rem;
}

.shelbi-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
line-height: 1;
transition: transform 0.2s ease, opacity 0.2s ease;
}

.shelbi-socials a:hover,
.shelbi-socials a:focus {
transform: scale(1.2);
opacity: 0.85;
}

/* ========================================
 MAIN
 ========================================*/
.shelbi-main {
display: block;
}

/* ========================================
 NAVBAR FIJO EN PORTADA Y GALERÍA
 (reemplaza la regla previa de margin-top negativo)
 ========================================*/
body.shelbi-has-hero .shelbi-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}

/* ========================================
 HOME — Rejilla de galerías
 ========================================*/
.shelbi-home {
display: block;
}

.shelbi-gallery-cover {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
color: #fff;
background-color: #111;
}

.shelbi-gallery-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.shelbi-gallery-cover:hover img,
.shelbi-gallery-cover:focus img {
transform: scale(1.03);
}

.shelbi-gallery-cover-title {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 2rem 6rem;
font-family: 'Gilda Display', Georgia, serif;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0;
font-size: clamp(2rem, 5vw, 4rem);
color: #fff;
text-align: center;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
pointer-events: none;
will-change: transform, opacity;
}

.shelbi-gallery-cover:hover .shelbi-gallery-cover-title,
.shelbi-gallery-cover:focus .shelbi-gallery-cover-title {
transform: translateY(-10px);
}

.shelbi-gallery-cover::before {
content: '';
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.15);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: 1;
}

.shelbi-gallery-cover:hover::before,
.shelbi-gallery-cover:focus::before {
opacity: 1;
}

/* El título debe quedar por encima de la capa */
.shelbi-gallery-cover-title {
z-index: 2;
}

/* --- Layout: immersive ---*/
.shelbi-home--immersive .shelbi-gallery-cover {
height: 90vh;
}

/* --- Layout: hero_grid ---*/
.shelbi-home--hero_grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}

.shelbi-home--hero_grid .shelbi-gallery-cover--hero {
grid-column: 1 / -1;
height: 90vh;
}

.shelbi-home--hero_grid .shelbi-gallery-cover:not(.shelbi-gallery-cover--hero) {
height: 50vh;
}

/* --- Layout: grid ---*/
.shelbi-home--grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}

.shelbi-home--grid .shelbi-gallery-cover {
height: 55vh;
}

@media (max-width: 767.98px) {
.shelbi-home--hero_grid,
.shelbi-home--grid {
grid-template-columns: 1fr;
}
.shelbi-home--immersive .shelbi-gallery-cover,
.shelbi-home--hero_grid .shelbi-gallery-cover--hero {
height: 70vh;
}
}

/* ========================================
 GALLERY BLOCK — Overlay + fade-in
 ========================================*/
.shelbi-gallery-content {
padding: 1.5rem 1.5rem;
max-width: 1600px;
margin: 0 auto;
}

.wp-block-gallery {
gap: 6px !important;
}

.wp-block-gallery figure {
position: relative;
overflow: hidden;
}

.shelbi-gallery-link {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
color: #fff;
}

.shelbi-gallery-link img {
display: block;
width: 100%;
height: auto;
transition: transform 1.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.shelbi-gallery-link:hover img,
.shelbi-gallery-link:focus img {
transform: scale(1.04);
}

.shelbi-gallery-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
background-color: rgba(0, 0, 0, 0.45);
transition: opacity 0.4s ease;
pointer-events: none;
}

.shelbi-gallery-link:hover .shelbi-gallery-overlay,
.shelbi-gallery-link:focus .shelbi-gallery-overlay {
opacity: 1;
}

.shelbi-gallery-plus {
font-size: 3rem;
color: #fff;
font-weight: 200;
line-height: 1;
transform: scale(0.85);
transition: transform 0.4s ease;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.shelbi-gallery-link:hover .shelbi-gallery-plus,
.shelbi-gallery-link:focus .shelbi-gallery-plus {
transform: scale(1);
}

/* ========================================
 LIGHTBOX
 ========================================*/
.shelbi-lightbox {
position: fixed;
inset: 0;
background: rgba(10, 10, 10, 0.94);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}

.shelbi-lightbox.is-open {
opacity: 1;
pointer-events: auto;
}

.shelbi-lightbox-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
user-select: none;
}

.shelbi-lightbox-close,
.shelbi-lightbox-prev,
.shelbi-lightbox-next {
position: absolute;
background: transparent;
border: none;
color: #fff;
font-size: 2.5rem;
line-height: 1;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s ease;
padding: 1rem;
}

.shelbi-lightbox-close:hover,
.shelbi-lightbox-prev:hover,
.shelbi-lightbox-next:hover {
opacity: 1;
}

.shelbi-lightbox-close {
top: 1.5rem;
right: 1.5rem;
font-size: 2rem;
}

.shelbi-lightbox-prev {
left: 1.5rem;
top: 50%;
transform: translateY(-50%);
}

.shelbi-lightbox-next {
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
}

.shelbi-lightbox.is-single .shelbi-lightbox-prev,
.shelbi-lightbox.is-single .shelbi-lightbox-next {
display: none;
}

@media (max-width: 575.98px) {
.shelbi-lightbox { padding: 1rem; }
.shelbi-lightbox-prev,
.shelbi-lightbox-next { font-size: 2rem; padding: 0.5rem; }
.shelbi-lightbox-close { top: 0.5rem; right: 0.5rem; }
}

/* ========================================
 TIPOGRAFÍA / CONTENIDO
 ========================================*/
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.25;
}

.entry-title {
font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.entry-content {
font-size: 1.05rem;
}

.entry-content p {
margin-bottom: 1.25rem;
}

/* Envoltorio minimalista (en lugar de las cards antiguas)*/
.shelbi-panel {
max-width: 780px;
margin: 0 auto;
padding: 3rem 1.5rem;
}

.shelbi-panel--wide {
max-width: 1100px;
}

/* ========================================
 COMENTARIOS
 ========================================*/
.comment-list {
list-style: none;
padding-left: 0;
}

.comment-list .children {
list-style: none;
padding-left: 1.5rem;
}

.shelbi-comment .comment-body {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
padding: 1.25rem 0;
}

.comment-avatar img {
width: 48px;
height: 48px;
object-fit: cover;
}

.comment-content p:last-child {
margin-bottom: 0;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
background-color: var(--shelbi-comment-input-bg);
color: var(--shelbi-comment-input-color);
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 0.25rem;
padding: 0.6rem 0.8rem;
}

.comment-form input:focus,
.comment-form textarea:focus {
outline: none;
border-color: var(--shelbi-accent);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.comment-form .submit {
background-color: var(--shelbi-comment-button-bg);
color: #fff;
border: none;
border-radius: 0.25rem;
padding: 0.65rem 1.5rem;
font-weight: 500;
letter-spacing: 0.02em;
transition: opacity 0.2s ease;
}

.comment-form .submit:hover,
.comment-form .submit:focus {
opacity: 0.85;
color: #fff;
}

/* ========================================
 ARCHIVOS / BÚSQUEDA / 404
 ========================================*/
.archive-header,
.search-header {
text-align: center;
padding: 3rem 1.5rem 2rem;
}

.archive-header h1,
.search-header h1 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
margin-bottom: 0.5rem;
}

.archive-description {
color: rgba(0, 0, 0, 0.55);
max-width: 600px;
margin: 0 auto;
}

/* Grid de resultados (búsqueda, archivos)*/
.shelbi-post-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.5rem;
padding: 1.5rem 0;
}

.shelbi-post-grid .post-item {
display: block;
text-decoration: none;
color: inherit;
overflow: hidden;
border-radius: 0.25rem;
}

.shelbi-post-grid .post-item img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 0.5s ease;
}

.shelbi-post-grid .post-item:hover img {
transform: scale(1.03);
}

/* Paginación*/
.pagination .page-numbers,
.navigation .nav-links a,
.navigation .nav-links span {
display: inline-block;
padding: 0.4rem 0.8rem;
border-radius: 0.25rem;
background: transparent;
color: var(--shelbi-text-color);
text-decoration: none;
font-weight: 500;
border: 1px solid rgba(0, 0, 0, 0.12);
transition: background 0.2s, color 0.2s;
}

.navigation .nav-links a:hover,
.navigation .nav-links a:focus,
.navigation .nav-links .current {
background: var(--shelbi-accent);
color: #fff;
border-color: var(--shelbi-accent);
opacity: 1;
}

/* ========================================
 PIE DE PÁGINA
 ========================================*/
.shelbi-footer {
background-color: var(--shelbi-footer-bg);
color: var(--shelbi-footer-color);
padding: 3rem 1.5rem 2.5rem;
margin-top: 4rem;
}

.shelbi-footer-inner {
max-width: 1600px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}

.shelbi-footer .shelbi-socials {
gap: 1rem;
}

.shelbi-footer .shelbi-socials a {
font-size: 1.35rem;
color: var(--shelbi-footer-color);
opacity: 0.85;
}

.shelbi-footer .shelbi-socials a:hover,
.shelbi-footer .shelbi-socials a:focus {
opacity: 1;
transform: scale(1.15);
}

.footer-copyright {
font-size: 0.875rem;
opacity: 0.75;
margin: 0;
}

/* ========================================
 FADE-IN (utilidad)
 ========================================*/
.fade-in {
opacity: 0;
transform: translateY(16px);
transition: opacity 1s ease, transform 1s ease;
will-change: opacity, transform;
}

.fade-in.is-visible {
opacity: 1;
transform: none;
}

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.fade-in {
opacity: 1;
transform: none;
transition: none;
}
}

/* ========================================
 RESPONSIVE
 ========================================*/

@media (min-width: 992px) {
.shelbi-navbar-inner {
padding-left: 3rem;
padding-right: 3rem;
}
}

@media (min-width: 1400px) {
.shelbi-navbar-inner {
padding-left: 4rem;
padding-right: 4rem;
}
}

/* --- Desktop: menú centrado ---*/
@media (min-width: 1200px) {
.shelbi-navbar-collapse {
display: flex !important;
flex-grow: 1;
justify-content: center;
}
}

/* --- Tablet / móvil ---*/
@media (max-width: 1199.98px) {
.shelbi-navbar-inner {
flex-wrap: wrap;
gap: 0.75rem;
}

/* Orden visual: brand | right | toggler | menú */
.navbar-brand {
order: 1;
margin-right: auto;
}

.shelbi-right {
order: 2;
}

.navbar-toggler {
order: 3;
flex-shrink: 0;
}

.shelbi-navbar-collapse {
order: 4;
flex-basis: 100%;
width: 100%;
margin-top: 0;
}

/* Menú desplegable sobre fondo blanco */
.shelbi-navbar-collapse.collapsing,
.shelbi-navbar-collapse.show {
background-color: #FFFFFF;
border-radius: 0.5rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
padding: 1rem;
margin-top: 0.75rem;
}

.shelbi-navbar-collapse.collapsing .nav-link,
.shelbi-navbar-collapse.show .nav-link,
.shelbi-navbar-collapse.collapsing .dropdown-item,
.shelbi-navbar-collapse.show .dropdown-item {
color: var(--shelbi-navbar-scrolled-text) !important;
text-shadow: none !important;
}

.shelbi-navbar .navbar-nav {
text-align: center;
gap: 0 !important;
}

.shelbi-navbar .navbar-nav .nav-link {
padding: 0.75rem 0.5rem;
}

.shelbi-navbar .dropdown-menu {
text-align: center;
background-color: transparent;
box-shadow: none;
padding: 0;
}

.shelbi-navbar .dropdown-item {
padding: 0.5rem 0;
color: inherit !important;
}
}

@media (max-width: 575.98px) {
.shelbi-site-title {
font-size: 1.15rem;
}

.shelbi-right {
gap: 0.5rem;
}

.shelbi-search.show input[type="search"],
.shelbi-search:hover input[type="search"],
.shelbi-search input[type="search"]:focus {
width: 120px;
}

.shelbi-footer-inner {
flex-direction: column;
text-align: center;
}
}

/* ========================================
 PÁGINAS Y ENTRADAS INTERNAS
 ========================================*/
.shelbi-page-header,
.shelbi-single .shelbi-page-header {
margin-bottom: 2rem;
text-align: center;
}

.shelbi-page-header .entry-title {
margin: 0;
}

/* Hero de página (cuando la página tiene imagen destacada)*/
.shelbi-page-hero {
position: relative;
height: 60vh;
min-height: 380px;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
color: #fff;
margin-bottom: 2.5rem;
}

.shelbi-page-hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}

.shelbi-page-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 50%);
z-index: 1;
}

.shelbi-page-hero-title {
position: relative;
z-index: 2;
text-align: center;
padding: 3rem 1.5rem;
}

.shelbi-page-hero-title h1 {
font-size: clamp(1.75rem, 4vw, 3rem);
margin: 0;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ========================================
 BOTÓN MINIMALISTA (usado en 404, archive, etc.)
 ========================================*/
.shelbi-btn {
display: inline-block;
padding: 0.75rem 1.75rem;
border: 1px solid var(--shelbi-text-color);
color: var(--shelbi-text-color);
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 500;
border-radius: 0;
transition: background-color 0.3s ease, color 0.3s ease;
background: transparent;
cursor: pointer;
}

.shelbi-btn:hover,
.shelbi-btn:focus {
background-color: var(--shelbi-text-color);
color: var(--shelbi-body-bg);
opacity: 1;
}