/*
Orbital Styles
Version: 1.0.0
Text Domain: orbital
*/

/* Header */

.orbital-header{
  display:flex;
  flex-direction: column;
  background:var(--color-background-inverse);
  color:var(--color-text-inverse);
  z-index:20;
}
a.site-name{
  color:var(--color-text-inverse);
  text-decoration:none;
  border-bottom: 1px solid var(--color-background-inverse);
  font-weight: var(--font-weight-bold);
}
a.site-name:hover{
  border-bottom: 1px solid var(--color-underline);
  color:var(--color-selection);
}
.orbital-header nav{
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  flex-wrap: wrap;
  padding: var(--space-s) 0;
}
.orbital-header nav ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction: row;
  gap: var(--space-m);
}
.orbital-header nav ul li{
  margin:0;
}
.orbital-header nav a{
  font-size: var(--step--1);
  line-height: var(--lh-small);
  font-family: var(--family-secondary);
  font-style: normal;
  color: var(--color-text-inverse);
}
.orbital-header nav a:hover{
  text-decoration:none;
  color:var(--color-selection);
}
@media (min-width: 768px){
  .orbital-header{
    flex-direction: row;
    justify-content: space-between;
  }
  .orbital-header nav{
    padding: 0;
  }
  .orbital-header nav ul{
    gap: var(--space-xl);
  }
}

/* Main */

.front-page-intro {
  margin-bottom:var(--space-xxxl);
}
.front-page-title {
  font-size: var(--font-size-l);
  margin-bottom: var(--space-m);
  line-height: var(--line-height-parragraph);
}
.title-strong {
  font-weight: var(--font-weight-bold);
}

/* Bloggin Base */
.bloggin {
  list-style: none;
  margin: var(--space-l) 0 0 0;
  padding: 0;
}
.bloggin ul,
.bloggin li {
  margin:0;
  padding:0;
  list-style-type: none;
}
.bloggin a {
  margin:0;
  text-decoration: none;
  display: inline-block;
  padding: 0;
  width:100%;
  transition:none;
  border:0;
}
.bloggin a:hover{
  transition:none;
  width: calc(100% + 64px);
  margin:0 0 0 -32px;
  padding: 0 var(--space-l);
  border:0;
}
.bloggin article{
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--color-border);
  width:100%;
}
.bloggin a:hover article{
  padding: var(--space-m) var(--space-s);
}
.bloggin li:first-child a article{
  border-top: 1px solid var(--color-border);
}
.bloggin li:first-child a:hover article{
  border-color: hsla(0, 0%, 0%, 1);  /* No lo dejé como variable */
}
.bloggin article header,
.bloggin article .content{
  margin: 0;
  padding: 0;
}
.bloggin p.meta{
  margin-bottom:0;
}
.bloggin .date{
  font-family: var(--family-secondary);
  color: var(--color-text-secondary);
}
.bloggin h3{
  margin:0 0 var(--space-s) 0;
  font-size: var(--step-1);
  font-weight: var(--font-weight-bold);
}
.bloggin-summary p{
  margin-bottom:0;
  font-size: var(--step--1);
  line-height: var(--lh-small);
  color: var(--color-text-secondary);

}
.bloggin a:hover *,
.bloggin a:hover .date,
.bloggin a:active *,
.bloggin a:active .date{
  color: var(--color-text-inverse);
  border-color: var(--color-background-inverse);
}

@media (min-width: 1200px){
  .bloggin article{
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-l);
  }
  .bloggin .meta{
    width: 200px;
    flex: 1;
  }
  .bloggin h3{
      margin:0 0 var(--space-s) 0;
  }
  .bloggin .content{
    flex: 1;
  }
}

/* Aside */

.orbital-aside{
  opacity: .3;
  background: 
		repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 
		60% 60%/3000px 3000px,
		repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 
		40% 40%/3000px 3000px;
	background-blend-mode: difference;
}

/* Footer */

.orbital-footer p{
  margin: 0;
  font-family: var(--family-secondary);
  color: var(--color-text-secondary);
  display: inline-block;
  width: 100%;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-m);
}

/* Button */
.wp-block-button__link,
.wp-element-button{
  border-radius: 4px;
  padding: var(--space-s) var(--space-m);
  background: var(--color-interaction-primary);
}
.wp-block-button__link:hover,
.wp-element-button:hover{
  color: var(--color-text-inverse);
  background: var(--color-interaction-hover);
  transition: background-color 0.3s ease;
}

/* Entrada */
.type-post{
  inline-size: min(100%, 72rem);
  margin-inline: auto;
  padding-inline: var(--space-l);
}
.entry-content img{
  max-width: 100%;
  height: auto;
}
.wp-block-quote{
  color: var(--color-text-secondary);
  font-style: italic;
}