/*---------------------------
styles.css
Wordpress Theme - Deadalus

Created by Mohan Samarasinghe on 10/12/2025.
---------------------------*/
/*

    This will define element styles

*/

/*--[ Global Styles ]-------------------------------------------------------------*/

body{
   font-family: var(--font-body);
   color: rgb(125, 125, 125);
}

h1, h2, h3, h4, h5, p, span, blockquote, code, pre{
   word-break: break-word;
}

h1, h2, h3, h4, h5 a{
   word-break: break-word;
   display: block;

}

img {
    display: block;
}

a {
    text-decoration: none;
    color: var(--color-links);
    display: block;

}

a:link, a:visited, a:active {
   color: var(--color-links);
}

a:hover {
    color: black;
}


p {
    text-align: justify;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    display: block; 
    line-height: 1.75em;
}

h1, h2, h3, h4, h5, h6 {
}

h1{
   padding-bottom: 0.2em;
}

h2,h3, h4, h5, h6 {
   padding-top: 0.5em;
   padding-bottom: 0.5em;
}

h1 { 
   font-size: var(--font-size-h1);
   font-family: var(--font-h1);
   line-height: var(--line-height-h1);
}

h2 { 
   font-size: var(--font-size-h2);
   font-family: var(--font-h2);
   line-height: var(--line-height-h1);
}

h3 { 
   font-size: var(--font-size-h3);
   font-family: var(--font-h3);
   line-height: var(--line-height-h1);
}

h4 { 
   font-size: var(--font-size-h4);
   font-family: var(--font-h4);
   line-height: var(--line-height-h1);
}

h5 { 
   font-size: var(--font-size-h5);
   font-family: var(--font-h5);
   line-height: var(--line-height-h1);
}

h6 { 
   font-size: var(--font-size-h6);
   font-family: var(--font-h6);
   line-height: var(--line-height-h1);
}

blockquote {
   padding: 20px 40px;
   font-style: italic;
   margin: 20px 40px 20px 40px;
   background: rgb(240, 240, 240);
   border-radius: 8px;
   line-height: 1.7em;
   position: relative;
   white-space: pre-wrap;
}

blockquote::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   transform: translateY(-50%);
   transform: translateX(-25%);
   width: 40px;
   height: 40px;
   opacity: 1;
   background-color: rgb(187, 226, 226);
   mask: url('_img/quote.svg') no-repeat center / contain;
   -webkit-mask: url('_img/quote.svg') no-repeat center / contain;
}

blockquote::after {
   content: "";
   position: absolute;
   bottom: 0;
   right: 0;
   width: 40px;
   height: 40px;
   margin-left: 10px;
   opacity: 1;
   transform: translateY(50%);
   transform: translateX(25%);
   background-color: rgb(187, 226, 226);
   mask: url('_img/quoteend.svg') no-repeat center / contain;
   -webkit-mask: url('_img/quoteend.svg') no-repeat center / contain;
}


pre, cite, code {
   font-family: var(--font-code);
   white-space: pre-wrap;
}


.wp-block-code{
   height: auto;
   display: flex;
    
}

.code {
   font-family: var(--font-code);
   padding: 20px 40px;
   font-style: italic;
   margin: 20px 40px 20px 40px;
   background: rgb(240, 240, 240);
   border-radius: 8px;
   line-height: 1.7em;
   position: relative;
}

.code::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   transform: translateY(-50%);
   transform: translateX(-50%);
   width: 40px;
   height: 40px;
   opacity: 1;
   background-color: rgb(214, 187, 226);
   mask: url('_img/<.svg') no-repeat center / contain;
   -webkit-mask: url('_img/<.svg') no-repeat center / contain;
}

.code::after {
   content: "";
   position: absolute;
   bottom: 0;
   right: 0;
   width: 40px;
   height: 40px;
   margin-left: 10px;
   opacity: 1;
   transform: translateY(50%);
   transform: translateX(50%);
   background-color: rgb(214, 187, 226);
   mask: url('_img/>.svg') no-repeat center / contain;
   -webkit-mask: url('_img/>.svg') no-repeat center / contain;
}



table {
   font-family: var(--font-code);
   background: rgb(240, 240, 240);
   padding: 5px;
   border-radius: 6px;
   width: 100%;
}

th {
   background: rgb(245, 245, 245);
   padding: 5px 10px;
   border-radius: 6px;
}

td {
   background: rgb(250, 250, 250);
   padding: 5px 10px;
   border-radius: 6px;
}

dt {
   font-family: var(--font-tags);
   padding-left: 1em;
}

dd {
   font-family: var(--font-body);
   padding-left: 3em;
}

ul, ol {
   margin: 0;
   padding-left: 1.5em;
   white-space: normal;
}

li {
   margin: 0.5em 0;
   line-height: 1;
   white-space: normal;
}

/* Nested unordered lists */
ul li {
   list-style-type: disc;
}

ul ul li {
   list-style-type: circle;
}

ul ul ul li {
   list-style-type: square;
}

/* Nested ordered lists */
ol li {
   list-style-type: decimal;
}

ol ol li {
   list-style-type: lower-alpha;
}

ol ol ol li {
   list-style-type: lower-roman;
}


/*--[ Image Gallery Styles ]------------------------------------------------------*/

.postgallery{
    display:flex;
    width: 100%;
    max-width: 100% !important;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 0px;
    margin-top: 20px;
}

.postgallery a{
    flex: 1 1 32%;
    min-width: 220px;
}

.postgalleryimg{
    width: 100%;
    height:100%;
    object-fit: cover;
    border-radius: 8px;
    aspect-ratio: 1 / 1; 
}

/*--[ Featured Image Styles ]-----------------------------------------------------*/

.feat_img{
    border-radius: 8px;
    max-width: 100%;
    height: auto;
    display: block;
    width: 100%;
    margin-bottom: 0px;
}

/*--[ Search Form Styles ]--------------------------------------------------------*/

.search-form {
   position: relative;
   width: 100%;
   margin-bottom: 20px;
}

.search-field {
   width: 100%;
   border-radius: 30px;
   padding: 10px 40px 10px 15px;
   border: 1px solid #ccc;
   font-family: var(--font-body);
   font-size: 1em;
}


.search-submit {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
   font-size: 2em;
   background-color: rgb(169, 169, 169);
   mask: url('_img/search.svg') no-repeat center / 22px;
   -webkit-mask: url('_img/search.svg') no-repeat center / 22px;
   cursor: pointer;
}

.search-submit:hover {
   background-color: rgb(89, 89, 89);
   mask: url('_img/search.svg') no-repeat center / 24px;
   -webkit-mask: url('_img/search.svg') no-repeat center / 24px;
}

/*--[ Tag Cloud Styles ]----------------------------------------------------------*/

.tag-cloud-widget {
    font-family: var(--font-tags);    
    text-align: center;
    color: rgba(0, 0, 0, 0.365);
}

.tag-cloud-widget fieldset {
    display: block;
    border: 1px groove rgba(0, 0, 0, 0.338);
    margin: 0px;
    border-radius: 8px;
    padding:10px;
    padding-top: 5px;
}

.tag-cloud-widget legend{
    text-align: left;
    margin-left: 20px;
    padding: 5px;
}

.tag-cloud-widget a {
    text-decoration: none;
    color: rgba(14, 28, 39, 0.6);
    margin: 3px;
    display: inline-block;
    transition: all 0.3s ease;
}

.tag-cloud-widget a:hover {
    color: rgba(12, 29, 42, 0.869);
    transform: scale(1.1);
}


/*-------------------------------------------------------------------------*/


.notfoundwrap{
   padding: 20px; 
   height:100%; width:100%; 
   display: flex; 
   flex-direction: column;
}

.notfoundimage{
    flex: 1 1 0;
}

.notfound{
    width: 80%;
    height: auto;
    margin: 0 auto;
    opacity: 80%;
}

.emphasis{
    font-family: var(--font-tags);    
    text-align: center;
    font-size: 4rem;
    color: rgba(0, 0, 0, 0.365);
    padding: 10px;
    line-height: 1.5;
    flex:0;
}

.subemphasis{
    font-family: var(--font-heading);    
    text-align: center;
    color: rgba(0, 0, 0, 0.365);
    line-height: 1.5;
    font-size: 1.5rem;
    padding: 0px 40px 40px 40px;
    flex: 0;
}

/*-------------------------------------------------------------------------*/

/*
.widget {
   background-color: white; 
   border-radius: 8px; 
   padding: 10px;
   font-family: var(--font-nav);
   color: rgba(0, 0, 0, 0.522);
}

.calander {
   display: grid; 
   grid-gap: 5px;
   grid-template-columns: repeat(7, 1fr);
   font-family: var(--font-nav);
   color: rgba(0, 0, 0, 0.522);
}

.calander span{
   width: 100%;
   display: block;
   align-content: center;
   text-align: center;
}

.dates span span{
   align-content: center;
   text-align: center;
   aspect-ratio: 1;
   padding: 5px;
}

.hasposts{
   border-radius:100%;
   background: rgb(255, 198, 198);
}
*/
.calendar-nav a{
   border-radius: 15px;
   align-content: center;
   text-align: center;
}
.calendar-nav {
   grid-template-columns: repeat(7, 1fr);
}

.calendar-label{
   font-size: 16px;
   letter-spacing: 1px;
   grid-column:span 5;
   text-align: center;
}

.calendarnav{
   padding: 5px;
   background: rgba(0, 0, 0, 0.05);
   border-radius: 10px;
   align-content: center;
   text-align: center;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.41);
}

.calendar { 
   width: 100%; 
   max-width: 400px; 
   margin: auto; 
   background-color: white; 
   border-radius: 8px; 
   padding: 10px;
   font-family: var(--font-nav);
   color: rgba(0, 0, 0, 0.522);
}

.calendar-header { 
   display: flex; 
   justify-content: space-between; 
   margin-bottom: 5px; 
}

.calendar-weekdays, .calendar-dates { 
   display: flex; flex-wrap: wrap; 
}

.days{
   border-top: 1px dashed rgba(0, 0, 0, 0.35); border-bottom: 1px dashed rgba(0, 0, 0, 0.35); padding-top: 5px; padding-bottom: 5px;
}

.calendar-weekdays span, .calendar-dates span { 
   width: calc(100% / 7); 
   text-align: center; padding: 0px; 
}

.calendar-weekdays { 
   font-weight: bold; 
   border-bottom: 1px dashed rgba(0,0,0,0.35); margin-bottom: 5px; 
}

.calendar-dates span span { 
   display: inline-block; 
   width: 30px; 
   height: 30px; 
   line-height: 30px; 
   text-align: center; 
   margin: 2px auto; 
}

.today { 
   background: tomato; 
   color: #fff; 
   border-radius: 50%; 
}

.hasposts { 
   background: #00bfff; 
   color: #fff; 
   border-radius: 50%; 
}

.empty { 
   visibility: hidden; 
}

/*--[ Post Styles ]--------------------------------------------------------*/
.text-content {
   text-align: justify;
   padding-bottom: 20px;
}