/**
 * News Rules Plugin Styles
 * Creates a classic newspaper grid layout using pseudo-elements.
 */

h2.headline-story {margin-bottom: 0;}
.headline-story .wp-block-post {padding-bottom: 0 !important;}

h2.wp-block-post-title  {
    margin-top: 0.2em;
}

.news-rules .wp-block-post-terms,
.news-rules .wp-block-post-excerpt__more-link,
.news-rules .wp-block-post-date {
    font-weight: 700;}

.news-rules .wp-block-post-terms,
.news-rules .wp-block-post-date {
    font-size: 0.8em;
}

.wp-block-post-template-is-layout-flow > li > .aligncenter {
    margin-bottom: 0.5em;
}

/* Add Calendar Icon to Post Date */
.wp-block-post-date {
    display: inline-flex;
    align-items: center;
    gap: 0.5em; /* Space between icon and text */
}

.wp-block-post-date::before {
    content: "";
    display: inline-block;
    width: 1em;  /* Scales automatically with font size */
    height: 1em;
    background-color: currentColor; /* Matches the text color */
    
    /* URL-encoded version of your SVG */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M224 64C206.3 64 192 78.3 192 96L192 128L160 128C124.7 128 96 156.7 96 192L96 240L544 240L544 192C544 156.7 515.3 128 480 128L448 128L448 96C448 78.3 433.7 64 416 64C398.3 64 384 78.3 384 96L384 128L256 128L256 96C256 78.3 241.7 64 224 64zM96 288L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 288L96 288z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M224 64C206.3 64 192 78.3 192 96L192 128L160 128C124.7 128 96 156.7 96 192L96 240L544 240L544 192C544 156.7 515.3 128 480 128L448 128L448 96C448 78.3 433.7 64 416 64C398.3 64 384 78.3 384 96L384 128L256 128L256 96C256 78.3 241.7 64 224 64zM96 288L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 288L96 288z'/%3E%3C/svg%3E");
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Stack Read More link at the bottom with Categories */
.news-rules .wp-block-post-excerpt__more-link {
    position: absolute !important;
    bottom: 2rem !important; /* Positions it just above the category terms */
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Adjust the Category Meta position to make room */
.news-rules .wp-block-post-terms {
    bottom: 0.5rem !important; /* Keep categories at the very bottom */
}

/* Ensure the post container has enough padding for both stacked elements */
.news-rules .wp-block-post {
    padding-bottom: 4.5rem; /* Increased from 3rem to fit both */
}

/* 2. Solid Triangle SVG */
.news-rules .wp-block-post-excerpt__more-link::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    margin-left: 5px; /* Space between text and triangle */
    vertical-align: text-bottom;
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    
    /* Solid Triangle Path */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z'/%3E%3C/svg%3E");
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.news-rules .wp-block-post-excerpt__more-link:hover::after {
    margin-left: 15px; /* Move the triangle further on hover */
}

/* sets text wrap fitting on left / right justified images */
.wp-block-post-template-is-layout-constrained > li > .alignleft, 
.wp-block-post-template-is-layout-flow > li > .alignleft {
    margin-inline-end: 1em;
}

/* newspaper style justification and kerning for excerpts */
.news-rules .wp-block-post-excerpt {
    text-align: justify;
    text-justify: inter-character;
    hyphens: auto;
font-size: 0.9em;}