/*
Custom styles for Sempress Dark Cyan
*/

/***** Global Vars *****/
:root {
  --custom-sj-title-font-family: 'Lora', serif;
  --custom-sj-main-color: #26a69a; /* ori: #009f9f */
  --custom-sj-clear-color: #2abbad;  /* ori: #00abab*/
  --custom-sj-bg-color: #fbfbfb; 
  --custom-sj-line-sep-color: #ccc;
  --custom-sj-other-link-main: #0073aa;
  --custom-sj-other-link-clear:#00aeff;
}

body, .entry-content {
    background-image:none !important;
    background-color: var(--custom-sj-bg-color);
    color: #5d5d5d !important;
    font-family: 'Open sans', Roboto, sans-serif;
    font-size: 18px;
    font-weight: normal;
    text-shadow: none;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

#branding {
    margin-top:-30px;
    font-family: var(--custom-sj-title-font-family);
    color: var(--custom-sj-main-color);
    display: flex;
    flex-direction: column;
}

#branding > * {
    order: 2;
}

.entry-header .entry-title, .entry-header .entry-title a {
  font-size: 32px;
}

.entry-title, h1, .wp-block-heading{
    font-family: var(--custom-sj-title-font-family);
    color: var(--custom-sj-main-color);
    font-weight: Bold;
    letter-spacing: -0.02em; 
    line-height: 1.3;
}

h1#site-title, #site-title a {
    color: var(--custom-sj-main-color);
    font-size: 74px;
    font-weight: 700;
    text-shadow: 2px 2px #cfcfcf;
    line-height: 1.2;
}

h1#site-title::first-letter{
    font-size: 140%;
}

h1.page-title a {
    color: var(--custom-sj-main-color);
}

h2#site-description {
    color: var(--custom-sj-clear-color);
    max-width: 85%;
    margin-bottom: 0px;
    padding-left: 70px;
    font-size:26px;
    font-weight: bold;
    text-shadow: 2px 2px 3px #cfcfcf;
    order: 1;
    float: left;
    transform:translateY(52px);
}

nav#access {
    border-top:1px solid var(--custom-sj-line-sep-color);
    border-bottom:1px solid var(--custom-sj-line-sep-color);
    margin-bottom:60px;
}

article.page, article.post, article.attachment {
    background: none;
    border: none;
    border-bottom: 1px solid var(--custom-sj-line-sep-color);
    border-radius: 0;
    box-shadow: none;
}

div.entry-meta {
    color: #7a7a7a;
    margin-bottom: 6px;
    font-size: 16px;
}

.entry-meta a {
   color: #7a7a7a;
}

time.entry-date {
   border-left: none;
   padding-left: 0;
   border-right: none;
   padding-right: 0px;
}

address.byline {
   padding-right: 0;
   border-right: 0;
}

time.entry-date::before {
  position: relative;
  top: 2px;
  margin-right: 2px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' viewBox='0 0 640 640'%3E%3Cpath fill='%23009f9f' d='M224 64C241.7 64 256 78.3 256 96L256 128L384 128L384 96C384 78.3 398.3 64 416 64C433.7 64 448 78.3 448 96L448 128L480 128C515.3 128 544 156.7 544 192L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 192C96 156.7 124.7 128 160 128L192 128L192 96C192 78.3 206.3 64 224 64zM160 304L160 336C160 344.8 167.2 352 176 352L208 352C216.8 352 224 344.8 224 336L224 304C224 295.2 216.8 288 208 288L176 288C167.2 288 160 295.2 160 304zM288 304L288 336C288 344.8 295.2 352 304 352L336 352C344.8 352 352 344.8 352 336L352 304C352 295.2 344.8 288 336 288L304 288C295.2 288 288 295.2 288 304zM432 288C423.2 288 416 295.2 416 304L416 336C416 344.8 423.2 352 432 352L464 352C472.8 352 480 344.8 480 336L480 304C480 295.2 472.8 288 464 288L432 288zM160 432L160 464C160 472.8 167.2 480 176 480L208 480C216.8 480 224 472.8 224 464L224 432C224 423.2 216.8 416 208 416L176 416C167.2 416 160 423.2 160 432zM304 416C295.2 416 288 423.2 288 432L288 464C288 472.8 295.2 480 304 480L336 480C344.8 480 352 472.8 352 464L352 432C352 423.2 344.8 416 336 416L304 416zM416 432L416 464C416 472.8 423.2 480 432 480L464 480C472.8 480 480 472.8 480 464L480 432C480 423.2 472.8 416 464 416L432 416C423.2 416 416 423.2 416 432z'/%3E%3C/svg%3E");
}

address.byline::before {
  position: relative;
  top: 2px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='%23009f9f' d='M320 312C386.3 312 440 258.3 440 192C440 125.7 386.3 72 320 72C253.7 72 200 125.7 200 192C200 258.3 253.7 312 320 312zM290.3 368C191.8 368 112 447.8 112 546.3C112 562.7 125.3 576 141.7 576L498.3 576C514.7 576 528 562.7 528 546.3C528 447.8 448.2 368 349.7 368L290.3 368z'/%3E%3C/svg%3E");
}

span.cat-links::before {
  position: relative;
  top: 2px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' viewBox='0 0 640 640'%3E%3Cpath fill='%23009f9f' d='M104 112C90.7 112 80 122.7 80 136L80 184C80 197.3 90.7 208 104 208L152 208C165.3 208 176 197.3 176 184L176 136C176 122.7 165.3 112 152 112L104 112zM256 128C238.3 128 224 142.3 224 160C224 177.7 238.3 192 256 192L544 192C561.7 192 576 177.7 576 160C576 142.3 561.7 128 544 128L256 128zM256 288C238.3 288 224 302.3 224 320C224 337.7 238.3 352 256 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L256 288zM256 448C238.3 448 224 462.3 224 480C224 497.7 238.3 512 256 512L544 512C561.7 512 576 497.7 576 480C576 462.3 561.7 448 544 448L256 448zM80 296L80 344C80 357.3 90.7 368 104 368L152 368C165.3 368 176 357.3 176 344L176 296C176 282.7 165.3 272 152 272L104 272C90.7 272 80 282.7 80 296zM104 432C90.7 432 80 442.7 80 456L80 504C80 517.3 90.7 528 104 528L152 528C165.3 528 176 517.3 176 504L176 456C176 442.7 165.3 432 152 432L104 432z'/%3E%3C/svg%3E");
}

.entry-title, .entry-meta, .entry-content  {
   padding: 0 !important;
   margin-bottom: 0;
}

.entry-title a, .entry-content a {
    color: var(--custom-sj-main-color);
}

h2.secondary-title {
 margin: 0;
 font-size: 23px;
 font-weight: bold;
 color: #bbb;
 padding-left: 0px;
 position: relative;
 top: 0px;
}

blockquote::before {
  color: var(--custom-sj-main-color);
  line-height: 27px;
}

.entry-content blockquote p {
  font-size:.92em;
  color:#555555;
}

.widget_block {
  padding-bottom:25px;
  margin-bottom: 25px;
}

.wp-block-heading {
  margin-bottom: 10px;
}

#nav-below .nav-previous, #nav-below .nav-next {
  margin-top: 10px;
}


div.widget-area {
  margin-top: 10px;
}

form.wp-block-search {
  margin-bottom: 10px;
}

input.wp-block-search__input {
 height: 100%;
}

ul.wp-block-social-links {
  padding:7px 0 0 0 !important;
}


.widget-area ul {
  padding: 0 0 0 20px;
}

.widget-area li {
  list-style-type: disc; 
}

.widget-area li::marker{
  color:var(--custom-sj-main-color);
  font-size: 120%;
} 

footer.entry-meta{
  margin-bottom: 0px;
}

a.p-category {
 color: #fff;
 background: #009f9f;
 border-radius: 5px;
 padding: 2px 7px 5px 7px;
 text-decoration: none;
}

a.p-category::before,
a.tag-cloud-link::before {
  content: "#";
}

a.p-category:hover {
 background: var(--custom-sj-clear-color);
}

a.p-category {
 font-size:85%; 
}

a.tag-cloud-link {
  font-family: Roboto, "Open sans", sans-serif;
  color: #555;
  background: var(--custom-sj-bg-color);
  border-radius: 5px;
  text-decoration: none;
  padding:0 0px;
  margin-right: 1px;
}

a.tag-cloud-link:hover {
  background: var(--custom-sj-bg-color);
  text-shadow: 1px 1px #00cfcf;
}

.entry-footer {
  margin-top: 15px;
  margin-bottom: 1px;
  padding: 0 8px 3px 8px;
  border: 1px solid var(--custom-sj-line-sep-color);
  border-radius: 3px;
  background-color: #f8f8f8;
}

div .tag-links-footer {
  text-align: right;
}

span.edit-link {
  float: right;
}

#content nav .nav-previous,
#content nav .nav-next {
  width: 40%;
}

/******************* SIDEBAR MENU *******************/
#secondary.widget-area #block-11{
  display: none;
}

#secondary.widget-area #block-11 .widget_nav_menu{
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/****************** /SIDEBAR MENU *******************/

/******************** Comments Section ********************/

h2.comments-title {
  font-weight: 400;
  font-size: 25px;
  line-height: 1.4;
  margin-bottom: 0
;
}

cite.fn a {
  font-weight: bold;
  color: var(--custom-sj-main-color);
  text-decoration: none;
}

cite.fn a::before {
  content: "@"
}

cite.fn a:hover {
  color: var(--custom-sj-clear-color);
  text-decoration: underline;
}

div.comment-content p {
  font-size: 15px;
  font-weight: 400;
  margin: 10px 0;
}

div.comment-content a {
  color: var(--custom-sj-main-color);
  text-decoration: none;
}

div.comment-content a:hover {
  color: var(--custom-sj-clear-color);
  text-decoration: underline;
}

.reply a.comment-reply-link::before {
  font-size: 14px;
}

.reply a.comment-reply-link{
  color: var(--custom-sj-other-link-main);
}

.reply a.comment-reply-link:hover{
  color: var(--custom-sj-other-link-clear);
  text-shadow: 0.5px solid var(--custom-sj-line-sep-color);
  text-decoration: none;
}

.comment-respond {
  padding-top: 15px;
  margin-top: 10px;
}

div#comments > fediverse-reply {
  margin-bottom: 40px;
}

div#respond fediverse-reply {
  margin: 0 0 16px 2px;
}

/*** change display order ***/
 div#comments {
  display: flex;
  flex-direction: column;
 }

 div#comments > * {
   order: 3;
 }

 div#comments h2:not([class]) ,
 div#comments ul.reaction-list,
 fediverse-reply  {
  order: 1 !important;
 }

/*** /display order ***/

ul.reaction-list img {
 max-width: 40px;
 max-height: 40px;
 border: .5px solid #707070;
 transform: translateY(7px);
 transition: transform .6s cubic-bezier(.34,1.56,.64,1);
}

ul.reaction-list img:hover {
 position: relative;
 transform: translateY(0px);
 z-index: 1;
}

ul.reaction-list span.emoji-overlay {  
 display: none;
}

div#comments h2:not([class])  {
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 0;
}

ul.reaction-list  {
  margin: 0;
  padding-top: 20px;
  padding-left: 2px;
  line-height: 58px;
  border-top: 1px solid var(--custom-sj-line-sep-color);
}

ul.reaction-list:first-of-type  {

}

ul.reaction-list--like::before {
 content: "👍";
 font-size: 26px;
}

ul.reaction-list--repost::before  {
 content: "♻️";
 font-size: 26px;
}

ul.reaction-list > li {
 margin: 0 -22px 0 0;
}

li.comment {
 margin: 5px 0;
}

ol.commentlist ul.children{
 padding-left: 30px;
}

ol.commentlist img.avatar {
 float: left;
 margin-right: 15px;
}

article.comment > * {
 margin-left: 65px;
}

article.comment > footer {
 margin-left: 0;
}

a#cancel-comment-reply-link {
 float: right;
}

div.websignin-login-message{
 margin-bottom: 20px;
 padding: 1px 12px;
 background: #f8f9fa;
 border-left: 4px solid var(--custom-sj-main-color);
 font-size:15.2px;
 border-radius: 4px;
}

div.websignin-login-message p{
  margin: 5px 0;
}

div.websignin-login-message a{
 color: var(--custom-sj-other-link-main);
 text-decoration: underline;
}

/*********** Fediverse reply form frame *************/

.activitypub-modal__frame div{
 border-bottom: none;
}

.activitypub-modal__frame input[type=text] {
  padding: 10px 12px;
  margin-right: 6px !important;
  font-size: 14px;
  background: #f9f9f9;
  border-radius: 6px !important;
  }

.activitypub-dialog__button-group button {
    padding: 10px 16px;
  }

 .wp-block-button__link{
   background: var(--custom-sj-main-color);
 }

 .wp-block-button__link:hover{
   background: var(--custom-sj-clear-color);
   color: #fff;
 }

/********************* Mobile Devices *********************/

@media only screen and (max-width: 767px) {

/******************* SIDEBAR MENU *******************/
#secondary.widget-area #block-11{
  display: revert;
}
aside#sidebar{
/*  background: var(--custom-sj-bg-color);
  position: absolute;
  top:0;
  left: 0;
  z-index: 9999;
  display: none; */
}
/******************* /SIDEBAR MENU *******************/

  body, .entry-content, footer.entry-meta {
    text-shadow: none !important;
  }

 nav#access {
  display: none;
 }

  #branding {
    border-bottom: 1px solid var(--custom-sj-line-sep-color) !important;
    padding-bottom: 0px;
    margin-bottom: 35px;
    margin-top: -20px !important;
  }

  #site-title {
    margin-bottom: 0px !important;
  }

  body #site-description, .single-column #site-description, .multi-column #site-description {
    padding-left: 50px;
    transform:translateY(40px);
  }
  div.entry-meta {
    margin-bottom: 8px !important;
  }

  a.p-category {
     color: #fff !important;
     font-size:75%;
     padding: 2px 5px 5px 5px;
  }

  footer.entry-meta {
   margin-bottom: 0px !important;
  }

  div#respond fediverse-reply {
    transform: none;
  }

  ol.commentlist ul.children{
    padding-left: 20px;
  }

div.websignin-login-message p{
  margin: 3px 0;
  font-size: 14px;
}

}
@media only screen and (max-width: 479px) {

 #site-title {
    font-size: 70px !important;
    line-height: 1.3;
    margin-bottom:0 !important;
  }

.entry-title, h1, .wp-block-heading{
    line-height: 1.2 !important;
}

h2.secondary-title {
  font-size:20px;
}

  body #site-description, .single-column #site-description, .multi-column #site-description {
    display: inline;
    font-size: 16pt;
    transform:translateY(40px);
  }

  #branding {
    border-bottom: 1px solid var(--custom-sj-line-sep-color) !important;
    margin-bottom: 40px;
  }

  .entry-content {
    font-size: 18px !important;
    line-height: 1.52;
  }
}