/*
 * WordPress's own widgets, in this theme's clothes.
 *
 * The theme styles the CARD a widget sits in -- .qm-aside-block and
 * .qm-aside-title come from the sidebar registration -- but not what WordPress
 * puts inside one. Categories, Archives, Pages, Meta, Recent Posts, Recent
 * Comments, RSS, Calendar and Nav Menu all ship their own markup, and until
 * this file they arrived as browser-default lists and a bare HTML table in the
 * middle of a designed page.
 *
 * Separate from theme.css because that file is the design's own app.css,
 * ported; WordPress's widget chrome is not part of that design.
 *
 * Everything below reads the design's tokens, so a site that changes its
 * palette changes these too.
 */

/*--------------------------------------------------------------
# The lists

  Categories, Archives, Pages, Meta, Recent Posts and Nav Menu all render the
  same shape: a ul of li of a. One rule set covers them, which is also why a
  plugin's widget that follows the same convention arrives styled.
--------------------------------------------------------------*/

.widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.widget ul li {
    position: relative;
    padding: 8px 0;
    border-bottom: 1px solid var(--line, #ece7e9);
    color: var(--ink-600, #6b5b62);
    font-size: var(--fs-500, 14px);
    line-height: 1.5;
}

.widget ul li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.widget ul li:first-child {
    padding-top: 0;
}

.widget ul li a {
    color: var(--ink-900, #1f0b12);
    text-decoration: none;
    transition: color var(--t-fast, .15s) ease;
}

.widget ul li a:hover,
.widget ul li a:focus-visible {
    color: var(--qm-primary);
}

/* A nested list is a child category or a sub-page: indented, and its top rule
   removed so the group reads as one block rather than a second list. */
.widget ul .children,
.widget ul .sub-menu {
    margin-top: 8px;
    padding-left: var(--sp-4, 16px);
    border-top: 1px solid var(--line, #ece7e9);
}

/* The count WordPress prints after a category or an archive. The theme moves
   it inside the link as a pill, and the sidebar's link rule spreads the name
   and the pill apart. The list item itself stays a block: as a flex row it
   also held the nested list of child categories, and laid those out sideways
   beside their parent instead of under it. */
.widget_categories li,
.widget_archive li {
    display: block;
}

.widget ul li .count {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
}

/*--------------------------------------------------------------
# Recent Posts and Recent Comments
--------------------------------------------------------------*/

.widget_recent_entries .post-date {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-300, 12px);
    color: var(--ink-500, #8a7880);
}

.widget_recent_comments li {
    display: block;
}

.widget_recent_comments .comment-author-link {
    font-weight: 600;
    color: var(--ink-900, #1f0b12);
}

/*--------------------------------------------------------------
# RSS

  Each item is a link, an optional date, an excerpt and a source. WordPress
  gives them classes but no layout at all.
--------------------------------------------------------------*/

.widget_rss li {
    display: block;
}

.widget_rss .rsswidget {
    font-weight: 600;
    display: block;
}

.widget_rss .rss-date {
    display: block;
    margin: 2px 0 6px;
    font-size: var(--fs-300, 12px);
    color: var(--ink-500, #8a7880);
}

.widget_rss .rssSummary {
    margin: 0 0 6px;
    font-size: var(--fs-400, 13px);
    line-height: 1.6;
    color: var(--ink-600, #6b5b62);
}

.widget_rss cite {
    font-size: var(--fs-300, 12px);
    font-style: normal;
    color: var(--ink-500, #8a7880);
}

/*--------------------------------------------------------------
# Calendar

  The one core widget that is a table. Left alone it arrives with browser
  default borders and centred bold headers, which is the single most obvious
  unstyled thing a theme can leave in a sidebar.
--------------------------------------------------------------*/

/* The month as a tinted band over the grid, seven equal columns, a row of
   day letters, and every day given a square of its own so the grid has air
   in it -- the classic widget and the Calendar block alike. */
.widget_calendar .wp-calendar-table,
.wp-block-calendar table {
    width: 100%;
    margin: 0 0 10px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: var(--fs-400, 13px);
}

.widget_calendar .wp-calendar-table caption,
.wp-block-calendar table caption {
    caption-side: top;
    margin: 0 0 8px;
    padding: 10px 12px;
    border-radius: var(--r-md, 10px);
    background: var(--qm-primary-50, #fff4f8);
    color: var(--qm-primary);
    font-size: var(--fs-500, 14px);
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
}

.widget_calendar .wp-calendar-table th,
.wp-block-calendar table th {
    padding: 10px 0 8px;
    border: 0;
    border-bottom: 1px solid var(--line, #ece7e9);
    background: none;
    color: var(--ink-500, #8a7880);
    font-size: var(--fs-200, 11px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
}

.widget_calendar .wp-calendar-table td,
.wp-block-calendar table td {
    height: 40px;
    padding: 3px 0;
    border: 0;
    background: none;
    color: var(--ink-600, #6b5b62);
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
}

.widget_calendar .wp-calendar-table tbody tr:first-child td,
.wp-block-calendar table tbody tr:first-child td {
    padding-top: 8px;
}

/* A day carrying a post is a link, and it is the only thing in the grid worth
   drawing attention to: a filled circle the size of the square it sits in. */
.widget_calendar .wp-calendar-table td a,
.wp-block-calendar table td a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--qm-primary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.widget_calendar .wp-calendar-table td a:hover,
.widget_calendar .wp-calendar-table td a:focus-visible,
.wp-block-calendar table td a:hover,
.wp-block-calendar table td a:focus-visible {
    background: var(--qm-primary-700, var(--qm-primary));
    color: #fff;
    transform: translateY(-1px);
}

/* Today is ringed, with or without a post. */
.widget_calendar .wp-calendar-table #today,
.wp-block-calendar table #today {
    color: var(--ink-900, #1f0b12);
    font-weight: 700;
}

.widget_calendar .wp-calendar-table #today > span,
.widget_calendar .wp-calendar-table #today > a,
.wp-block-calendar table #today > span,
.wp-block-calendar table #today > a {
    box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 4px var(--qm-primary-100, #ffd3df);
    border-radius: 50%;
}

.widget_calendar .wp-calendar-table #today > span,
.wp-block-calendar table #today > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

/* The way to the months on either side. */
.widget_calendar .wp-calendar-nav,
.wp-block-calendar .wp-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
    font-size: var(--fs-400, 13px);
}

.widget_calendar .wp-calendar-nav a,
.wp-block-calendar .wp-calendar-nav a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--line, #ece7e9);
    border-radius: var(--r-pill, 999px);
    color: var(--ink-700, #4b3b42);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}

.widget_calendar .wp-calendar-nav a:hover,
.widget_calendar .wp-calendar-nav a:focus-visible,
.wp-block-calendar .wp-calendar-nav a:hover,
.wp-block-calendar .wp-calendar-nav a:focus-visible {
    border-color: var(--qm-primary);
    color: var(--qm-primary);
}

.widget_calendar .wp-calendar-nav-prev { text-align: start; }
.widget_calendar .wp-calendar-nav-next { text-align: end; }

/*--------------------------------------------------------------
# Tag cloud

  WordPress writes an inline font-size on every tag, scaled by how many posts
  carry it. In a pill that produces fifteen different pill heights, so the size
  is settled here -- and !important is the only thing that beats an inline
  style the widget itself wrote.
--------------------------------------------------------------*/

.widget .tagcloud,
.widget .wp-block-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Each tag is the pill the tag row under a post uses -- padded, bordered,
   one height -- in the sidebar and in a footer column alike. */
.widget .tagcloud a,
.widget .wp-block-tag-cloud a {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--line, #ece7e9);
    border-radius: var(--r-pill, 999px);
    background: var(--surface, #fff);
    color: var(--ink-700, #4b3b42);
    font-size: var(--fs-300, 12px) !important;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.widget .tagcloud a:hover,
.widget .tagcloud a:focus-visible,
.widget .wp-block-tag-cloud a:hover,
.widget .wp-block-tag-cloud a:focus-visible {
    border-color: var(--qm-primary);
    background: var(--qm-primary);
    color: #fff;
}

/* In the sidebar's white card the pill takes the page's tint; in the tinted
   footer it stays white so it still reads as a pill. */
.qm-aside-block .tagcloud a,
.qm-aside-block .wp-block-tag-cloud a {
    background: var(--surface-2, #fff4f8);
}

.qm-aside-block .tagcloud a:hover,
.qm-aside-block .tagcloud a:focus-visible,
.qm-aside-block .wp-block-tag-cloud a:hover,
.qm-aside-block .wp-block-tag-cloud a:focus-visible {
    background: var(--qm-primary);
}

/*--------------------------------------------------------------
# Search, and the text widget
--------------------------------------------------------------*/

.widget_search .search-form,
.widget_block_search .wp-block-search__inside-wrapper {
    display: flex;
    gap: 8px;
}

.widget_text p:last-child,
.widget_block p:last-child {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Anything long

  A URL or an unbroken word in a widget is the classic way a narrow column is
  pushed wider than its grid. It wraps instead.
--------------------------------------------------------------*/

.widget,
.widget a,
.widget li {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/*--------------------------------------------------------------
# The dropdown variants

  Archives and Categories can each be shown as a <select>, and the block
  versions print one too. Left alone it is the browser's own control in the
  middle of a designed card. Drawn here as the design's select: a bordered
  field the width of the widget, with the chevron on the right.
--------------------------------------------------------------*/

.widget select,
.widget_block select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 40px 0 14px;
    border: 1px solid var(--line, #ece7e9);
    border-radius: var(--r-md, 10px);
    background-color: var(--surface, #fff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23754151' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 15px;
    color: var(--ink-900, #1f0b12);
    font-size: var(--fs-500, 14px);
    font-weight: 500;
    line-height: 1.4;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.widget select:hover,
.widget_block select:hover {
    border-color: var(--qm-primary);
}

.widget select:focus,
.widget_block select:focus {
    outline: none;
    border-color: var(--qm-primary);
    box-shadow: 0 0 0 3px var(--qm-primary-50);
}

[dir="rtl"] .widget select,
[dir="rtl"] .widget_block select {
    padding: 0 14px 0 40px;
    background-position: left 14px center;
}

/* The block versions print a visible label over their select. */
.widget_block .wp-block-archives-dropdown label,
.widget_block .wp-block-categories-dropdown label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--ink-900, #1f0b12);
}