/*
Theme Name: Spenser Blog
Theme URI: https://wproyal.com/spenser-blog/
Author: WP Royal
Author URI: https://wproyal.com
Description: Spenser Blog - the sleek and sophisticated WordPress theme designed with the modern travel blogger in mind. Whether you're sharing your latest adventures or tips and tricks for exploring new spenser-blogations, Spenser Blog's clean and crisp design will make your content shine. With its responsive layout, Spenser Blog ensures that your website will look great on any device, from desktops to tablets and smartphones. Navigation is a breeze thanks to the intuitive and user-friendly interface, and customization options are endless, allowing you to personalize your website to match your unique style. The elegant dark color scheme of Spenser Blog creates a luxurious and exclusive feel, inviting your readers to immerse themselves in your content. But don't be fooled by its high-end look - Spenser Blog is easy to use, even for those without any coding knowledge.
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 5.7
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spenser
Tags: blog, grid-layout, custom-colors, custom-header, editor-style, flexible-header, footer-widgets, right-sidebar, two-columns, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, theme-options, sticky-post

/* =========================
   Categories: shared reset
========================= */
.wp-block-categories {
    margin:0.4rem 0;
    padding: 0;
    list-style: none;
    li{
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--wp--preset--color--custom-border);
    }
}

.wp-block-post-content.entry-content a:hover {
    text-decoration: underline;
}
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent-grey);
}

.wp-block-comment-author-name a{
    font-size: var(--wp--preset--font-size--custom-8);
}

.wp-block-post-author__byline{
    font-size: 0.90rem;
}
/* Post Bio */
.wp-block-post-author__bio{
    font-size: var(--wp--preset--font-size--custom-9);
}
/* Post Bio */

/* Seperator */

.wp-block-separator{
    border-width: 1px;
}

/* End Seperator */


/* First Post Layout */

.home .wp-block-query ul li:first-child{
    grid-column: span 2;
}
.home .wp-block-query ul li:first-child .wp-block-group.has-background{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
.home .wp-block-query ul li:first-child .wp-block-group .wp-block-post-featured-image,
.home .wp-block-query ul li:first-child .wp-block-group .wp-block-post-featured-image + .wp-block-group{
    width: 50% !important;
    height: auto !important;
}
.home .wp-block-query ul li:first-child .wp-block-group .wp-block-post-featured-image + .wp-block-group .wp-block-group.is-content-justification-stretch{
    flex-grow: 1;
    justify-content: center;
}
.home .wp-block-query ul li:first-child .wp-block-post-title{
    font-size: var(--wp--preset--font-size--custom-3);
}
/* End First Post Layout */


/*Categories and tags*/

.taxonomy-category a,
.taxonomy-post_tag a{
    padding: 2px 10px;
    border: 1px solid var(--wp--preset--color--primary-color);
    border-radius: 1000px;
    background: var(--wp--preset--color--primary-color);
}
.taxonomy-category a:hover,
.taxonomy-post_tag a:hover{
    border-color: var(--wp--preset--color--custom-reverse);
}

/*End categories and tags*/


/* Sticky posts */

.wp-block-post.sticky .wp-block-columns{
    flex-direction: row-reverse;
    height: 100%;
    overflow: hidden;
}
.wp-block-post.sticky,
.wp-block-query:has(.wp-block-post.sticky),
.wp-block-post-template:has(.wp-block-post.sticky){
    height: 100%;
}

/* End Sticky posts */


/* Featured Image Hover */
.wp-block-post .wp-block-group,
.wp-block-post-featured-image{
    overflow: hidden;
}

.wp-block-post-featured-image a,
.wp-block-post-featured-image a img{
    transition: all 0.3s ease-in-out;
}

.wp-block-post-featured-image a:hover img{
    transform: scale(1.05);
}

.wp-block-post-featured-image img{
    object-position: top;
}

/* End Featured Image Hover */

/* Input */
input,textarea,select{
    padding: 8px 15px;
}
textarea{
    border-radius: 15px;
}
input,select,button[type="submit"]{
    border-radius: 1000px;
}

/* End Input */



/* -------------------------------------------------
   Quotes: Blockquote, Pullquote, Verse (Gutenberg)
   Works in posts + pages
-------------------------------------------------- */

/* Base blockquote */
.wp-block-quote,
blockquote {
  position: relative;
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid currentColor;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.wp-block-quote p,
blockquote p {
  margin: 0;
  font-size: 1.1em;
  line-height: 1.6;
}

.wp-block-quote p + p,
blockquote p + p {
  margin-top: 0.85em;
}

/* Citation */
.wp-block-quote cite,
.wp-block-quote__citation,
blockquote cite {
  display: block;
  margin-top: 0.9rem;
  font-style: normal;
  opacity: 0.75;
  font-size: 0.95em;
}

/* Optional quote mark (subtle) */
.wp-block-quote::before,
blockquote::before {
  content: "“";
  position: absolute;
  top: -0.35rem;
  left: 0.85rem;
  font-size: 3rem;
  line-height: 1;
  opacity: 0.25;
}

/* Large style blockquote (Gutenberg style: is-style-large) */
.wp-block-quote.is-style-large {
  padding: 1.75rem 1.75rem;
  border-left-width: 6px;
}

.wp-block-quote.is-style-large p {
  font-size: 1.25rem;
  line-height: 1.5;
}

/* -------------------------------------------------
   Pullquote
-------------------------------------------------- */
.wp-block-pullquote {
  margin: 2.5rem 0;
  padding: 1.75rem 1.75rem;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border-left: 0;
  background: transparent;
}

.wp-block-pullquote p {
  margin: 0;
  font-size: 1.25rem;
  text-align: center;
}

.wp-block-pullquote cite,
.wp-block-pullquote__citation {
  margin-top: 1rem;
  display: block;
  text-align: center;
  font-style: normal;
  opacity: 0.75;
  font-size: 0.95em;
}

/* Solid color pullquote (if you use background color controls) */
.wp-block-pullquote.has-background {
  background: inherit;
}

/* -------------------------------------------------
   Verse (poetry / lyrics formatting)
-------------------------------------------------- */
.wp-block-verse {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  white-space: pre-wrap; /* keeps verse line breaks */
  line-height: 1.8;
}

/* -------------------------------------------------
   Dark mode friendly tweaks (if your theme uses dark bg)
-------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .wp-block-quote,
  blockquote,
  .wp-block-pullquote,
  .wp-block-verse {
    background: color-mix(in srgb, currentColor 10%, transparent);
  }
}


/* Navigation */

@media (min-width: 600px){
    ul.wp-block-navigation ul.wp-block-page-list{
        row-gap: 10px;
    }
    ul.wp-block-navigation li{
        padding: 5px 0;
    }
    ul.wp-block-navigation li ul li{
        padding: 0;
    }
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container{
        box-shadow: 0px 0px 26px -5px rgba(0, 0, 0, 0.2);
        transform: translateY(20px);
        transition: all 0.2s ease-in-out;
    }
    .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container,
    .wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container,
    .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within>.wp-block-navigation__submenu-container{
        transform: translateY(0);
    }
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{
        left: 100% !important;
    }
}

@media (max-width: 599px){
    .wp-block-navigation__responsive-container-content,
    .wp-block-navigation__responsive-container-content ul,
    .wp-block-navigation__responsive-container-content ul li{
        align-items: center !important;
    }

    .wp-block-navigation__responsive-dialog{
        margin-top: 10px !important;
    }

    ul.wp-block-navigation li a{
        padding: 5px 10px !important;
    }

    ul.wp-block-navigation,
    ul.wp-block-navigation li,
    ul.wp-block-navigation li ul{
        gap: 10px !important;
        padding: 0 !important;
    }
}

/* End Navigation */


/* Header Search */

header :where(.wp-block-search__input){
    height: 35px;
}
header .wp-block-search.wp-block-search__button-only .wp-block-search__button{
    padding: 5px;
}

/* End Header Search */


/* Social Icons */

.wp-block-social-links.has-small-icon-size a{
    font-size: 18px;
}

/* End Social Icons */


/* Search Page*/

.search .wp-block-post .wp-block-columns{
    height: 100% !important;
}

/* End Search Page */


/* Button Hover */

.wp-element-button{
    transition: background-color 0.2s ease-in-out;
}

.wp-element-button:hover{
    background-color: var(--wp--preset--color--accent-grey);
}
.wp-block-button.is-style-outline .wp-element-button:hover{
    background: transparent;
    color: var(--wp--preset--color--accent-grey) !important;
}

/* End Button Hover */

/* Pagination */

.wp-block-query-pagination, 
.wp-block-query-pagination-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next{
    display: flex;
    gap: 10px !important;
    flex-wrap: wrap;
    justify-content: center;
}

.wp-block-query-pagination .is-arrow-arrow{
    margin: 0;
}

.wp-block-query-pagination a,
.page-numbers {
    padding: 4px 15px;
    border: 1px solid var(--wp--preset--color--custom-reverse);
    color: var(--wp--preset--color--custom-reverse) !important;
    transition: background-color 0.2s ease-in-out;
    border-radius: 10px;
}

.wp-block-query-pagination a:hover,
.page-numbers:hover {
    background: var(--wp--preset--color--primary-color);
    color: var(--wp--preset--color--custom-reverse) !important;
    border-color: var(--wp--preset--color--primary-color);
}

.page-numbers.current,
.wp-block-query-pagination .current {
    background: var(--wp--preset--color--primary-color);
    color: var(--wp--preset--color--custom-reverse) !important;
    border-color: var(--wp--preset--color--primary-color);
    cursor: default;
}

.page-numbers.dots {
    border: 0;
    background: transparent;
    padding: 4px;
}
.page-numbers.dots:hover{
    background: none;
    color: var(--wp--preset--color--custom-reverse) !important;
}

/* End Pagination */

/* Hide empty column */
.wp-block-column:not(:has(*)) {
    display: none;
}

/* Column AFTER empty column */
.wp-block-column:not(:has(*)) + .wp-block-column {
    flex: 1 1 0 !important;
}

/* Column BEFORE empty column */
.wp-block-columns:has(.wp-block-column:not(:has(*)))
> .wp-block-column:has(+ .wp-block-column:not(:has(*)) {
    flex: 1 1 0 !important;
}