/*
Theme Name: Yellow Suna
Theme URI: http://yellowsuna.netsons.org/
Author: Massimo De Faveri
Author URI: https://www.linkedin.com/in/maxdefa/
Copyright: 2026 Massimo De Faveri
Description: Yellow Suna is a minimal multipurpose WordPress block theme.
Tags: block-patterns, full-site-editing, blog, editor-style
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yellow-suna
*/

/* ==========================================================================
   STYLE.CSS CONTENTS
   ==========================================================================

   1. Global Elements
   2. HTML Element Styles
   3. Content Link Styles
   4. Global Content Constraints
   5. Global Theme Elements
   6. Button Styles
   7. Table Block Customizations
   8. Navigation Block Style: Suna Menu
   9. Avatar Block Style: Suna Avatar
  10. Image Block Style: Suna Responsive
  11. Hero Title
  12. Hero Image & Tab Overlay System
  13. Cover Hover Effect & Column Cover Layouts
  14. Pattern: YS Single Custom Sidebar Layout
  15. Query Loop Image Placeholders
  16. Query Loop Card Layout
  17. Query Loop Components
  18. Pattern: YS Horizontal News Section
  19. Patterns: YS Horizontal Magazine Section & YS Vertical Compact Loop
  20. Magazine Template
  21. Blog Template: Dynamic Grid Layout

   ========================================================================== */

/*
 * Sections are organized by component responsibility,
 * then by patterns and templates.
 */

/* ==========================================================================
   GLOBAL ELEMENTS
   ========================================================================== */

/*
 * Site title link thickness.
 */
.wp-block-site-title a {
    text-decoration-thickness: 2px;
}

/*
 * Submenu spacing / outlines
 */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
    margin-bottom: 3px;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
    outline-offset: 4px;
}

.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    outline-offset: 0;
}

/*
 * Reduce widows / orphans
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
    text-wrap: pretty;
}

/*
 * Prevent horizontal scrollbar in preformatted text
 */
:where(pre) {
    overflow-x: auto;
}

/* ==========================================================================
   HTML ELEMENT STYLES
   ========================================================================== */

/*
 * Normalize address element
 */
address {
    font-style: normal;
}

/*
 * Abbreviation and acronym styling
 */
abbr[title],
acronym[title] {
    text-decoration: underline dotted;
    text-decoration-color: var(--wp--preset--color--smog);
    text-underline-offset: 3px;
    background-color: var(--wp--preset--color--sunalight);
    cursor: help;
}

abbr[title]:hover,
acronym[title]:hover {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--smog);
}

/*
 * Support deprecated big element.
 */
big {
    font-size: 1.25em;
    line-height: inherit;
}

/*
 * Inline code styling outside code blocks.
 */
:where(p, li, blockquote) code:not([class]) {
    font-family: var(--wp--preset--font-family--google-sans-code);
    font-size: 0.9em;
    font-weight: 400;
    color: var(--wp--preset--color--smog);
    background-color: var(--wp--preset--color--sunaice);
    padding: 0.2em 0.4em;
    border-radius: 0;
}

/*
 * Preformatted text styling outside block styles.
 */
pre:not([class]) {
    font-family: var(--wp--preset--font-family--google-sans-code);
    font-size: 0.9em;
    background-color: var(--wp--preset--color--smog);
    color: var(--wp--preset--color--base);
    padding: var(--wp--preset--spacing--40);
    border-left: 6px solid var(--wp--preset--color--suna);
    overflow-x: auto;
    white-space: pre;
    margin-bottom: var(--wp--preset--spacing--40);
}

/*
 * Deleted and obsolete text styling.
 */
del,
s,
strike {
    text-decoration: line-through;
    color: var(--wp--preset--color--smoke);
    text-decoration-color: var(--wp--preset--color--smoke);
    text-decoration-thickness: 2px;
}

/*
 * Inline horizontal rule styling.
 */
hr:not([class]) {
    border: none;
    border-top: 6px solid var(--wp--preset--color--suna);
    margin: var(--wp--preset--spacing--40) 0;
}

/*
 * Inserted text styling.
 */
ins {
    text-decoration: none;
    background-color: transparent;
    border-bottom: 2px solid var(--wp--preset--color--suna);
    color: inherit;
}

/*
 * Keyboard input styling.
 */
kbd {
    font-family: var(--wp--preset--font-family--google-sans-code);
    background-color: var(--wp--preset--color--sunalight);
    color: var(--wp--preset--color--contrast);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
    padding: 2px 5px;
    font-size: 0.9em;
    display: inline-block;
}

/*
 * Support deprecated teletype element.
 */
tt {
    font-family: var(--wp--preset--font-family--google-sans-code);
}

/*
 * Subscript and superscript positioning.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.2em;
}

/*
 * Inline quotation styling.
 */
q {
    font-style: italic;
}

/* ==========================================================================
   CONTENT LINK STYLES
   ========================================================================== */

/*
 * Highlight links inside post content
 */
.entry-content > .wp-block-paragraph a,
.entry-content > .wp-block-list a,
.entry-content > .wp-block-heading a,
.ys-main-content-column > .wp-block-paragraph a,
.ys-main-content-column > .wp-block-list a,
.ys-main-content-column > .wp-block-heading a {
    background-color: var(--wp--preset--color--sunaice);
    color: inherit;
    text-decoration: none;
    padding: 0 2px;
    margin: 0 -2px;
    transition: background-color 0.2s ease;
    border-bottom: 2px solid var(--wp--preset--color--suna);
}

/* 
 * Highlight links on hover
 */
.entry-content > .wp-block-paragraph a:hover,
.entry-content > .wp-block-list a:hover,
.entry-content > .wp-block-heading a:hover,
.ys-main-content-column > .wp-block-paragraph a:hover,
.ys-main-content-column > .wp-block-list a:hover,
.ys-main-content-column > .wp-block-heading a:hover {
    background-color: var(--wp--preset--color--suna);
    color: var(--wp--preset--color--contrast);
}

/* ==========================================================================
   GLOBAL CONTENT CONSTRAINTS
   ========================================================================== */

.wp-block-columns.ys-constrained-columns,
.wp-block-group.ys-header-container,
.wp-block-group.ys-footer-container {
    width: min(var(--wp--style--global--content-size), calc(100% - var(--wp--preset--spacing--20) * 2));
    margin-inline: auto !important;
}

/* ==========================================================================
   GLOBAL THEME ELEMENTS
   ========================================================================== */

/*
 * Footer background gradients
 */
footer {
    background-image: var(--wp--preset--gradient--suna-ice);
}

.home footer,
.front-page footer {
    background-image: var(--wp--preset--gradient--suna-snow);
}

/* ==========================================================================
   BUTTON STYLES
   ========================================================================== */

/*
 * Button transition.
 */
button,
.wp-element-button,
input[type="submit"] {
    transition: all 0.2s ease;
}

/*
 * Active button feedback.
 */
button:active,
.wp-element-button:active,
input[type="submit"]:active {
    transform: translateY(1px);
    transition: none;
}

/* ==========================================================================
   TABLE BLOCK CUSTOMIZATIONS
   ========================================================================== */

/*
 * Table caption spacing
 */
.wp-block-table figcaption {
    margin-top: 8px;
}

/*
 * Table header and footer styling
 */
.wp-block-table thead {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--wp--preset--color--sunaice);
}

.wp-block-table tfoot {
    font-weight: bold;
    background-color: var(--wp--preset--color--sunaice);
}

/* ==========================================================================
   NAVIGATION BLOCK STYLE: SUNA MENU
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESKTOP
   -------------------------------------------------------------------------- */

/*
 * Parent item styling.
 */
.wp-block-navigation.is-style-suna-menu .wp-block-navigation-item__content {
    padding: 3px 12px;
    border-radius: 8px;
    transition: background 0.2s ease, text-decoration 0.2s ease;
    text-decoration: none;
}

.wp-block-navigation.is-style-suna-menu .wp-block-navigation-submenu .wp-block-navigation-item__content {
    padding: 3px 12px !important;
}

.wp-block-navigation.is-style-suna-menu .wp-block-navigation-item__content:hover {
    background-color: var(--wp--preset--color--suna);
    text-decoration: underline;
}

/*
 * Custom focus state with background highlight.
 */
.wp-block-navigation.is-style-suna-menu .wp-block-navigation-item__content:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    background-color: var(--wp--preset--color--suna);
}

/*
 * Submenu container styling.
 */
.wp-block-navigation.is-style-suna-menu .wp-block-navigation__submenu-container {
    border: 2px solid var(--wp--preset--color--suna);
    background-color: var(--wp--preset--color--base);
    border-radius: 10px;
    top: calc(100% + 5px);
    /* Creates the vertical gap from the parent */
    position: absolute;
    /* Important: must be visible to allow the ::before "bridge" to work */
    overflow: visible;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/*
 * Active menu item styling.
 */
.wp-block-navigation.is-style-suna-menu .wp-block-navigation-item__content:active {
    background-color: var(--wp--preset--color--sunaice);
}

/*
 * Hover bridge.
 *
 * Fills the gap between the parent item and the submenu,
 * preventing the submenu from closing while the pointer
 * moves across the spacing.
 */
.wp-block-navigation.is-style-suna-menu .wp-block-navigation__submenu-container::before {
    content: '';
    display: block;
    position: absolute;
    top: -12px;
    /* Covers the 5px gap + the 2px border + a small overlap */
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
    z-index: -1;
}

/*
 * Submenu item spacing.
 */
.wp-block-navigation.is-style-suna-menu .wp-block-navigation-submenu li {
    border-radius: 8px;
    margin-right: 3px;
    margin-left: 3px;
    /* Air around the items to avoid touching the border */
    overflow: hidden;
    /* Clips the hover background to the 8px radius */
}

/*
 * Submenu alignment for trailing items.
 */
.wp-block-navigation.is-style-suna-menu .wp-block-navigation-item:last-child .wp-block-navigation__submenu-container {
    left: auto;
    right: 0;
}

.wp-block-navigation.is-style-suna-menu .wp-block-navigation-submenu li:last-child {
    margin-bottom: 3px;
}

.wp-block-navigation.is-style-suna-menu .wp-block-navigation-submenu li:first-child {
    margin-top: 3px;
}

/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

/*
 * Touch interaction.
 */
.wp-block-navigation.is-style-suna-menu {
    -webkit-tap-highlight-color: transparent;
}

/*
 * Mobile menu overlay.
 */
.ys-header-container .is-style-suna-menu .wp-block-navigation__responsive-container.is-menu-open {
    background-color: transparent;
}

/*
 * Mobile menu dialog styling.
 */
.ys-header-container .is-style-suna-menu .is-menu-open .wp-block-navigation__responsive-dialog {
    background-color: color-mix(in srgb, var(--wp--preset--color--base), transparent 6%);
    margin-top: var(--wp--preset--spacing--40);
    margin-bottom: var(--wp--preset--spacing--40);
    margin-left: var(--wp--preset--spacing--80);
    margin-right: var(--wp--preset--spacing--40);
    padding: var(--wp--preset--spacing--40);
    border: 3px solid var(--wp--preset--color--suna);
    border-radius: 20px;
}

/*
 * Mobile menu content adjustments.
 */
.ys-header-container .is-style-suna-menu .is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 0;
    margin-top: 0;
}

.ys-header-container .is-style-suna-menu .is-menu-open .wp-block-navigation-item__content {
    padding: 3px 12px !important;
}

/*
 * Remove default focus styling in mobile menu.
 */
.ys-header-container .is-style-suna-menu .is-menu-open .wp-block-navigation-item__content:focus {
    outline: none;
    box-shadow: none;
}

/*
 * Close button positioning.
 */
.ys-header-container .is-style-suna-menu .is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: var(--wp--preset--spacing--20);
    right: var(--wp--preset--spacing--20);
}

/*
 * Mobile submenu spacing.
 */
.ys-header-container .is-style-suna-menu.has-modal-open .wp-block-navigation-submenu li {
    margin: 0;
    padding: 5px 0;
}

/* ==========================================================================
   AVATAR BLOCK STYLE: SUNA AVATAR
   ========================================================================== */

/*
 * Avatar image styling.
 */
.wp-block-avatar.is-style-suna-avatar img {
    border: 3px solid var(--wp--preset--color--suna);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-sizing: border-box;
}

/* ==========================================================================
   IMAGE BLOCK STYLE: SUNA RESPONSIVE
   ========================================================================== */

/*
 * Responsive image sizing.
 */
.wp-block-image.is-style-suna-responsive img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   HERO TITLE
   ========================================================================== */

/*
 * Hero title styling
 */
.hero-title {
    margin-bottom: -0.16em;
    font-size: clamp(2rem, 8vw, 6rem);
    line-height: 1;
}

.hero-title strong {
    font-weight: 800;
}

/*
 * Hero accent strip sizing
 */
.ys-hero-carpet {
    min-height: 14px;
    height: 14px;
}

@media (min-width: 782px) {
    .ys-hero-carpet {
        min-height: 40px;
        height: 40px;
    }
}

/* ==========================================================================
   HERO IMAGE & TAB OVERLAY SYSTEM
   ========================================================================== */

/* --------------------------------------------------------------------------
   1/3 — GLOBAL TAB SYSTEM & CORE OVERLAY
   -------------------------------------------------------------------------- */

/*
 * Creates the overlapping tab effect for the main content area.
 */
body:is(.single-post, .page, .archive, .blog, .home, .error404, .search) .ys-tab-content {
    position: relative;
    margin-top: -5rem;
    min-height: 5.1rem;
    z-index: 10;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* --------------------------------------------------------------------------
   2/3 — DEFAULT STATE (NO FEATURED IMAGE)
   -------------------------------------------------------------------------- */

/*
 * Header spacing when no hero image is present.
 */
header {
    background-color: var(--wp--preset--color--suna);
    padding-bottom: 7rem;
}

/*
 * Header-to-content background transition.
 */
.ys-container {
    background: linear-gradient(to bottom,
            var(--wp--preset--color--suna) 6rem,
            var(--wp--preset--color--sunaice) 6rem);
}

/*
 * Restores rounded corner when no hero image is present.
 */
body:is(.single-post, .page):not(:has(.attachment-post-thumbnail)) .ys-container>.wp-block-columns,
body:is(.archive, .error404, .search) .ys-container>.wp-block-columns {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* --------------------------------------------------------------------------
   3/3 — FEATURED IMAGE / HERO STATE
   -------------------------------------------------------------------------- */

/*
 * WordPress Admin Bar offset.
 */
body.admin-bar {
    --ys-admin-bar-height: 32px;
}

@media (max-width: 782px) {
    body.admin-bar {
        --ys-admin-bar-height: 46px;
    }
}

/*
 * Positions header over hero images.
 */
body:is(.single-post, .page):has(.attachment-post-thumbnail) header,
.home header,
.blog header {
    position: absolute;
    top: var(--ys-admin-bar-height, 0px);
    left: 0;
    right: 0;
    background-color: transparent;
    padding-bottom: 0;
    z-index: 20;
}

/*
 * Hero state background overrides.
 */
body:is(.single-post, .page):has(.attachment-post-thumbnail) .ys-container,
.blog .ys-container {
    background: var(--wp--preset--color--sunaice);
}

/*
 * Responsive hero height.
 */
.wp-block-cover.ys-hero-cover,
figure.ys-hero-cover img {
    height: clamp(300px, 60vh + 12vw, 650px);
    object-fit: cover;
    width: 100vw;
}

/* ==========================================================================
   COVER HOVER EFFECT & COLUMN COVER LAYOUTS
   ========================================================================== */

.hover-cover .cover-caption {
    box-sizing: border-box;
    width: 100%;
    max-width: 20em;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.7s ease;
}

.hover-cover:hover .cover-caption {
    transform: translateY(0);
    opacity: 1;
}

/*
 * Disable animation inside editor
 */
.editor-styles-wrapper .hover-cover .cover-caption {
    transform: none;
    opacity: 1;
    transition: none;
}

/*
 * Responsive cover aspect ratio.
 *
 * Maintains a consistent aspect ratio on mobile when
 * column-based covers stack vertically.
 */
@media (max-width: 781px) {

    div.wp-block-column div.wp-block-cover.ys-cover-column[style],
    div.wp-block-column div.wp-block-cover.hover-cover {
        aspect-ratio: 16 / 9 !important;
        min-height: auto;
    }
}

/* ==========================================================================
   PATTERN: YS SINGLE CUSTOM SIDEBAR LAYOUT
   ========================================================================== */

/*
 * Custom sidebar vertical alignment.
 */
@media (min-width: 781px) {
    .wp-block-columns>.wp-block-column.ys-custom-sidebar-offset {
        margin-top: -62px;
    }
}

/* ==========================================================================
   QUERY LOOP IMAGE PLACEHOLDERS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1/4 SHARED PLACEHOLDER PROPERTIES
   -------------------------------------------------------------------------- */

.ys-archives-query-card:not(:has(img))::before,
.ys-blog-query-card:not(:has(img))::before,
.ys-magazine-query-card:not(:has(img))::before,
.ys-magazine-query-card-wide:not(:has(img))::before {
    content: 'NO IMAGE';
    color: var(--wp--preset--color--smog);
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   2/4 STANDARD IMAGE LAYOUT PLACEHOLDERS
   -------------------------------------------------------------------------- */

.ys-archives-query-card:not(:has(img)),
.ys-magazine-query-card-wide:not(:has(img)) {
    position: relative;
    padding-top: 0;
}

.ys-archives-query-card:not(:has(img))::before,
.ys-magazine-query-card-wide:not(:has(img))::before {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--wp--preset--color--sunaice);
}

.ys-archives-query-card:not(:has(img))::before {
    aspect-ratio: 3/2;
}

.ys-magazine-query-card-wide:not(:has(img))::before {
    aspect-ratio: 16/9;
}

/* --------------------------------------------------------------------------
   3/4 COVER-BASED QUERY CARD PLACEHOLDER
   -------------------------------------------------------------------------- */

.ys-blog-query-card:not(:has(img)),
.ys-magazine-query-card:not(:has(img)) {
    background-color: var(--wp--preset--color--sunaice);
}

.ys-blog-query-card:not(:has(img))::before,
.ys-magazine-query-card:not(:has(img))::before {
    display: block;
    text-align: center;
    position: absolute;
    top: 33%;
    left: 0;
    right: 0;
}

/* --------------------------------------------------------------------------
   4/4 GUTENBERG EDITOR PLACEHOLDER RESET
   -------------------------------------------------------------------------- */

.editor-styles-wrapper .ys-archives-query-card:not(:has(img))::before,
.editor-styles-wrapper .ys-blog-query-card:not(:has(img))::before,
.editor-styles-wrapper .ys-magazine-query-card:not(:has(img))::before,
.editor-styles-wrapper .ys-magazine-query-card-wide:not(:has(img))::before {
    content: none;
}

/* ==========================================================================
   QUERY LOOP CARD LAYOUT
   ========================================================================== */

/*
 * Ensures consistent height for query loop cards.
 */
.ys-archives-query-card,
.ys-magazine-query-card-news,
.ys-blog-query-container {
    height: 100%;
}

/*
 * Prevents inner blocks from shrinking.
 */
.ys-blog-query-container > * {
    flex-shrink: 0;
    width: 100%;
}

/*
 * Allows the last block to fill remaining card height.
 */
.ys-blog-query-container > *:last-child {
    flex-grow: 1;
}

/* ==========================================================================
   QUERY LOOP COMPONENTS
   ========================================================================== */

/* 
 * Remove margin in excerpt
 */
.magazine-excerpt p {
    margin-top: 0;
}


/* ==========================================================================
   PATTERN: YS HORIZONTAL NEWS SECTION
   ========================================================================== */

/* --------------------------------------------------------------------------
   1/2 DESKTOP
   -------------------------------------------------------------------------- */

@media (min-width: 782px) {

    /*
     * Vertical section heading.
     */
    .ys-news-section>h2 {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        line-height: 0.65;
    }

}

/* --------------------------------------------------------------------------
   2/2 MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {

    /*
     * Stack the news section vertically.
     */
    .ys-news-section {
        flex-direction: column;
        border-width: 1px !important;
    }

    /*
     * Horizontal section heading.
     */
    .ys-news-section>h2 {
        width: 100%;
        border-bottom: 2px solid var(--wp--preset--color--suna);
        font-size: var(--wp--preset--font-size--large);
        line-height: 0.60;
        text-align: right;
    }

}

/* ==========================================================================
   PATTERNS: YS HORIZONTAL MAGAZINE SECTION & YS VERTICAL COMPACT LOOP
   ========================================================================== */

/*
 * Horizontal date layout on mobile.
 */
@media (max-width: 781px) {
    .ys-magazine-date-stack {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.35rem;
    }
}

/* ==========================================================================
   MAGAZINE TEMPLATE
   ========================================================================== */

/*
 * Prioritize featured column on mobile.
 */

@media (max-width: 781px) {
    .ys-magazine-columns > .wp-block-column:nth-child(2) {
        order: -1;
    }
}

/* ==========================================================================
   BLOG TEMPLATE: DYNAMIC GRID LAYOUT
   ========================================================================== */
/*
 * Creates an alternating editorial grid on a 6-column layout.
 *
 * Pattern:
 * - Odd rows: 2 posts, each spanning 3 columns.
 * - Even rows: 3 posts, each spanning 2 columns.
 *
 * The cycle repeats every 5 posts.
 * Desktop only. Mobile falls back to the default stack.
 */

@media (min-width: 782px) {

    /*
     * Alternating 2–3 grid pattern on desktop.
     */
    .ys-blog-dynamic>li:nth-child(5n + 1),
    .ys-blog-dynamic>li:nth-child(5n + 2) {
        grid-column: span 3;
    }

    .ys-blog-dynamic>li:nth-child(5n + 3),
    .ys-blog-dynamic>li:nth-child(5n + 4),
    .ys-blog-dynamic>li:nth-child(5n + 5) {
        grid-column: span 2;
    }

    /*
     * Remove paragraph bottom margin.
     */
    .ys-blog-dynamic p {
        margin-bottom: 0;
    }

}