/*
Theme Name: Dupeon v1.1
Description: A clean, fast blog theme for download and software sites in an old Twitter style: soft blue-gray background, Twitter blue accents, white cards with a gray right and bottom edge, grid and list views, an animated Download button, a styled plain-text site title and tagline, highlighted author comments and indented, colour-coded replies. System fonts only (nothing is loaded from other sites). Colours are set in Appearance > Customize.
Version: 1.1.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dupeon
Tags: two-columns, right-sidebar, left-sidebar, custom-background, custom-colors, custom-logo, custom-menu, footer-widgets, rtl-language-support, theme-options, threaded-comments, translation-ready, blog

This theme is licensed under the GPL. See readme.txt for credits.

Contents
  1. Design tokens        10. Sidebar and widgets
  2. Reset and base       11. Related posts, author box, tags
  3. Typography           12. Comments and forms
  4. Icons                13. Pagination
  5. Layout               14. Footer
  6. Header               15. WordPress core classes
  7. Navigation           16. Accessibility and motion
  8. Post cards           17. Responsive
  9. Single post and page (includes the full-width Donation Page template)
*/

/*--------------------------------------------------------------
# 1. Design tokens
# --dp-accent, --dp-deep and --dp-edge are overwritten by the
# Customizer (Appearance > Customize > Theme Options > Styling).
--------------------------------------------------------------*/
:root {
    /* Old Twitter colour pattern (accent, deep and edge can be changed in the Customizer) */
    --dp-accent: #1DA1F2;
    --dp-deep: #14171A;
    --dp-edge: #AAB8C2;
    --dp-accent-deep: color-mix(in srgb, var(--dp-accent) 80%, #000);
    --dp-accent-bright: color-mix(in srgb, var(--dp-accent) 78%, #fff);
    --dp-link: color-mix(in srgb, var(--dp-accent) 68%, #000);
    --dp-ring: color-mix(in srgb, var(--dp-accent) 24%, transparent);

    --dp-ink: #14171A;
    --dp-text: #292F33;
    --dp-muted: #657786;
    --dp-bg: #E6ECF0;
    --dp-card: #FFFFFF;
    --dp-soft: #F5F8FA;
    --dp-line: #E1E8ED;
    --dp-line-strong: #CCD6DD;

    --dp-radius-card: 16px;
    --dp-radius-media: 12px;
    --dp-radius-field: 10px;
    --dp-pad: 26px;
    --dp-shadow: 0 1px 2px rgba(20, 23, 26, 0.06), 0 14px 28px -22px rgba(20, 23, 26, 0.35);

    /* System fonts only: nothing is downloaded, so the text never changes after the first paint */
    --dp-font-head: "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, system-ui, -apple-system, sans-serif;
    --dp-font-body: "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, system-ui, -apple-system, sans-serif;
}

/*--------------------------------------------------------------
# 2. Reset and base
--------------------------------------------------------------*/
html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
*, *:before, *:after {
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}
body {
    overflow-x: hidden;
    font-family: var(--dp-font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--dp-text);
    background: var(--dp-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none }
[hidden] { display: none }
abbr[title] { border-bottom: 1px dotted; cursor: help; }
b, strong { font-weight: 700 }
dfn, cite, em, i { font-style: italic }
mark, ins { background: #FDF3B8; color: var(--dp-ink); text-decoration: none; }
small { font-size: 80% }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em }
sub { bottom: -0.25em }
img { border: 0; height: auto; max-width: 100%; }
svg:not(:root) { overflow: hidden }
hr { height: 1px; background-color: var(--dp-line-strong); border: 0; margin: 0 0 1.5em; }
pre {
    overflow: auto;
    max-width: 100%;
    margin-bottom: 1.6em;
    padding: 18px 20px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #E1E8ED;
    background: var(--dp-deep);
    border-radius: var(--dp-radius-media);
}
code, kbd, tt, var, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
code, kbd, tt, var {
    font-size: 0.9em;
    padding: 2px 6px;
    color: var(--dp-link);
    background: var(--dp-soft);
    border-radius: 6px;
}
pre code { padding: 0; color: inherit; background: none; font-size: inherit; }
ul, ol { margin: 0; padding: 0 }
ul { list-style: disc }
ol { list-style: decimal }
li > ul, li > ol { margin-bottom: 0; margin-left: 17px; margin-top: 5px; }
dt { font-weight: 700 }
dd { margin: 0 1.5em 1.5em }
address { margin: 0 0 1.5em }
blockquote, q { quotes: "" "" }
blockquote:before, blockquote:after, q:before, q:after { content: "" }
table {
    width: 100%;
    margin-bottom: 22px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    border: 1px solid var(--dp-line);
    border-radius: var(--dp-radius-media);
}
td, th { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--dp-line); }
th { font-family: var(--dp-font-head); font-weight: 700; color: var(--dp-ink); background: var(--dp-soft); }
tr:last-child td { border-bottom: 0 }
thead tr:first-child th:first-child { border-top-left-radius: 13px }
thead tr:first-child th:last-child { border-top-right-radius: 13px }

/*--------------------------------------------------------------
# 3. Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.55em;
    font-family: var(--dp-font-head);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dp-ink);
    font-optical-sizing: auto;
}
h1 { font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.03em; }
h2 { font-size: clamp(24px, 3vw, 30px) }
h3 { font-size: 22px }
h4 { font-size: 20px }
h5 { font-size: 18px }
h6 { font-size: 16px }
p { margin-bottom: 1.25em }
a {
    color: var(--dp-link);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
a:hover { color: var(--dp-accent) }

/*--------------------------------------------------------------
# 4. Icons (bundled icon font)
--------------------------------------------------------------*/
@font-face {
    font-family: 'dupeon-icons';
    src: url('fonts/dupeon-icons.woff') format('woff'), url('fonts/dupeon-icons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
[class*="icon-"]:before {
    font-family: "dupeon-icons";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-plus:before { content: '\e800' }
.icon-bookmark:before { content: '\e801' }
.icon-comment:before { content: '\e802' }
.icon-users:before { content: '\e803' }
.icon-minus:before { content: '\e804' }
.icon-mail:before { content: '\e805' }
.icon-twitter:before { content: '\f099' }
.icon-facebook:before { content: '\f09a' }
.icon-rss:before { content: '\f09e' }
.icon-menu:before { content: '\f0c9' }
.icon-pinterest-circled:before { content: '\f0d2' }
.icon-linkedin:before { content: '\f0e1' }
.icon-angle-double-right:before { content: '\f101' }
.icon-angle-left:before { content: '\f104' }
.icon-angle-right:before { content: '\f105' }
.icon-angle-up:before { content: '\f106' }
.icon-angle-down:before { content: '\f107' }
.icon-github:before { content: '\f113' }
.icon-youtube:before { content: '\f167' }
.icon-dropbox:before { content: '\f16b' }
.icon-instagram:before { content: '\f16d' }
.icon-flickr:before { content: '\f16e' }
.icon-tumblr:before { content: '\f173' }
.icon-dribbble:before { content: '\f17d' }
.icon-vimeo-squared:before { content: '\f194' }
.icon-reddit:before { content: '\f1a1' }
.icon-behance:before { content: '\f1b4' }
.icon-soundcloud:before { content: '\f1be' }

/*--------------------------------------------------------------
# 5. Layout
--------------------------------------------------------------*/
.main-container { width: 100%; max-width: 100%; margin: 0 auto; clear: both; }
#page, .container { max-width: 1120px; min-width: 240px; margin: 0 auto; position: relative; }
#page { display: flow-root; clear: both; min-height: 100px; padding: 34px 0 20px; }
.article { float: left; width: calc(100% - 380px); margin-bottom: 30px; }
.post { float: left; width: 100%; }
.clear:before, .clear:after, .clearfix:before, .clearfix:after, #site-header:before, #site-header:after {
    content: "";
    display: table;
}
.clear:after, .clearfix:after, #site-header:after { clear: both }
.clear { clear: both }
.alignleft { float: left }
.alignright { float: right }
.last { margin-right: 0 }

/*--------------------------------------------------------------
# 6. Header
--------------------------------------------------------------*/
#site-header {
    position: relative;
    float: left;
    width: 100%;
    z-index: 99;
    padding: 26px 0 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Site title and tagline: plain text */
.site-branding {
    float: left;
    max-width: 100%;
    padding: 2px 0;
}
.site-title {
    margin: 0 0 6px;
    font-family: var(--dp-font-head);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
}
.site-title a { color: var(--dp-link); transition: color 0.2s ease; }
.site-title a:hover { color: var(--dp-ink) }
.site-logo { margin: 4px 0 8px; line-height: 0; }
.custom-logo-link { display: inline-block }
.custom-logo { display: block; max-height: 64px; width: auto; }
.site-description {
    margin: 0;
    font-size: clamp(15px, 1.7vw, 18px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.005em;
    color: var(--dp-muted);
}
.site-description:empty { display: none }

/* Header widget area (banner to the right of the title) */
.widget-header-item {
    float: right;
    width: 100%;
    max-width: 550px;
    margin-top: -1px;
}
.widget-header-item img, .widget-header-item iframe, .widget-header-item ins { display: block; max-width: 100%; height: auto; }

/*--------------------------------------------------------------
# 7. Navigation
--------------------------------------------------------------*/
a#pull { display: none }
.primary-navigation { display: block; clear: both; width: 100%; max-width: 100%; }
div.primary-navigation { margin: 20px auto 0 }
#navigation {
    width: 100%;
    margin: 0 auto;
    padding: 6px;
    font-size: 15px;
    background: var(--dp-card);
    border: 1px solid var(--dp-line);
    border-radius: 18px;
    box-shadow: var(--dp-shadow);
}
#navigation ul { list-style-type: none }
#navigation ul:after { content: ""; display: table; clear: both; }
#navigation ul li { float: left; position: relative; }
#navigation a {
    display: block;
    padding: 0 16px;
    font-family: var(--dp-font-head);
    font-size: 15px;
    font-weight: 600;
    line-height: 42px;
    text-align: left;
    color: var(--dp-ink);
    border-radius: 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#navigation a:hover, #navigation li:hover > a { color: var(--dp-accent-deep); background: var(--dp-soft); }
#navigation ul li.current-menu-item > a,
#navigation ul li.current_page_item > a,
#navigation ul li.current-menu-ancestor > a,
#navigation ul li.current-cat > a { color: #fff; background: var(--dp-accent); }
#navigation .toggle-caret { display: none }
.menu-item-has-children > a:after, .cat-parent > a:after {
    content: '\f107';
    font-family: 'dupeon-icons';
    margin-left: 8px;
    font-size: 12px;
    opacity: 0.7;
}
.widget .menu-item-has-children > a:after { display: none }

/* Dropdowns: CSS only, they open on hover and on keyboard focus */
#navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    width: 230px;
    margin: 8px 0 0;
    padding: 6px;
    z-index: 400;
    background: var(--dp-card);
    border: 1px solid var(--dp-line);
    border-radius: 16px;
    box-shadow: 0 24px 44px -22px rgba(20, 23, 26, 0.5);
}
/* invisible bridge so the menu stays open while the pointer crosses the gap */
#navigation ul ul:before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
#navigation ul ul li { float: none; width: 100%; }
#navigation ul ul a {
    padding: 10px 14px;
    font-family: var(--dp-font-body);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--dp-text);
}
#navigation ul ul .menu-item-has-children > a, #navigation ul ul .cat-parent > a { padding-right: 30px; position: relative; }
#navigation ul ul .menu-item-has-children > a:after, #navigation ul ul .cat-parent > a:after {
    content: '\f105';
    position: absolute;
    right: 12px;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
}
#navigation ul ul ul { top: -7px; left: 100%; margin: 0 0 0 8px; }
#navigation ul ul ul:before { top: 0; bottom: 0; left: -10px; right: auto; width: 10px; height: auto; }
@media screen and (min-width: 866px) {
    #navigation li:hover > ul, #navigation li:focus-within > ul { display: block }
}

/* Expand/collapse carets (added by js/theme.js) */
.toggle-menu ul ul { display: none }
.toggle-menu .toggle-menu-item-parent { position: relative }
.toggle-menu .toggle-caret {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    text-align: center;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
.toggle-menu .toggle-caret i { font-size: 15px; line-height: 20px; color: inherit; text-align: center; }
.toggle-menu .active > .toggle-caret .dp-icon:before { content: '\e804' } /* minus */
.widget .toggle-caret {
    top: 7px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    color: var(--dp-accent-deep);
    background: var(--dp-soft);
    border-radius: 50%;
}
.widget .toggle-caret i { line-height: 26px }
.widget li:first-child > .toggle-caret { top: -3px }
footer .widget .toggle-caret { color: #fff; background: rgba(255, 255, 255, 0.14); }

/*--------------------------------------------------------------
# 8. Post cards, date tag, meta, Download button
--------------------------------------------------------------*/
.post.excerpt {
    position: relative;
    display: flow-root;
    clear: both;
    margin-bottom: 26px;
    padding: 24px var(--dp-pad) 26px;
    background: var(--dp-card);
    border: 1px solid var(--dp-line);
    border-radius: var(--dp-radius-card);
    box-shadow: var(--dp-shadow);
}
/* Homepage, archive and search cards: a coloured border on the right and bottom edge only */
.article > .post.excerpt {
    border: 0;
    border-right: 5px solid var(--dp-edge);
    border-bottom: 5px solid var(--dp-edge);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.article > .post.excerpt:hover {
    transform: translateY(-2px);
    border-right-color: var(--dp-accent);
    border-bottom-color: var(--dp-accent);
}
/* Grid view: homepage, archive and search cards sit in two columns */
.home-page .article, .search-area .article {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}
.home-page .article > *, .search-area .article > * { min-width: 0 }
.home-page .article > .postsby,
.home-page .article > .pagination,
.home-page .article > .posts-navigation,
.home-page .article > .single_post,
.search-area .article > .postsby,
.search-area .article > .pagination,
.search-area .article > .posts-navigation,
.search-area .article > .single_post { grid-column: 1 / -1 }
.home-page .article > .post.excerpt,
.search-area .article > .post.excerpt {
    display: flex;
    flex-direction: column;
    float: none;
    width: auto;
    margin: 0;
}
.home-page .article > .post.excerpt > header,
.search-area .article > .post.excerpt > header { flex: 1 1 auto }
.home-page .article > .post.excerpt .download-wrap,
.search-area .article > .post.excerpt .download-wrap { float: none; align-self: flex-end; margin-top: 16px; }
.home-page .article > .post.excerpt .title,
.search-area .article > .post.excerpt .title { font-size: clamp(19px, 2vw, 22px) }

/* Grid / list switch */
.view-switch {
    display: none;
    grid-column: 1 / -1;
    justify-self: end;
    gap: 4px;
    margin: 0;
    padding: 4px;
    background: var(--dp-card);
    border: 1px solid var(--dp-line-strong);
    border-radius: 999px;
}
.dp-js .view-switch { display: inline-flex }
.view-switch__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    color: var(--dp-muted);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.view-switch__btn:hover { color: var(--dp-accent) }
.view-switch__btn:focus-visible { outline: 2px solid var(--dp-accent); outline-offset: 1px; }
.dp-view-grid .view-switch__btn[data-view="grid"],
.dp-view-list .view-switch__btn[data-view="list"] { color: #fff; background: var(--dp-accent-deep); }

/* List view: one card per row, title on the left and the Download button on the right */
.dp-view-list .home-page .article,
.dp-view-list .search-area .article { grid-template-columns: minmax(0, 1fr); }
.dp-view-list .home-page .article > .post.excerpt,
.dp-view-list .search-area .article > .post.excerpt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 22px;
    align-items: center;
}
.dp-view-list .article > .post.excerpt > .date-tag { grid-column: 1 / -1 }
.dp-view-list .article > .post.excerpt > header { grid-column: 1; margin-bottom: 0; }
.dp-view-list .article > .post.excerpt > .post-content { grid-column: 1; }
.dp-view-list .article > .post.excerpt .download-wrap { grid-column: 2; grid-row: 2 / span 2; align-self: center; margin-top: 0; }
.dp-view-list .home-page .article > .post.excerpt .title,
.dp-view-list .search-area .article > .post.excerpt .title { font-size: clamp(20px, 2.4vw, 25px); }

.single_post {
    --dp-pad: 36px;
    position: relative;
    display: flow-root;
    float: left;
    width: 100%;
    padding: 26px var(--dp-pad) 34px;
    background: var(--dp-card);
    border: 1px solid var(--dp-line);
    border-radius: var(--dp-radius-card);
    box-shadow: var(--dp-shadow);
}
.sticky { display: block }
.article > .post.sticky.excerpt { border-right-color: var(--dp-accent); border-bottom-color: var(--dp-accent); }

/* Date tag: a swallow-tail label that wraps around the card's left edge */
.date-tag {
    position: relative;
    display: block;
    width: max-content;
    max-width: calc(100% + var(--dp-pad));
    margin: 0 0 16px calc(-1 * var(--dp-pad) - 8px);
    padding: 0 24px 0 16px;
    font-family: var(--dp-font-head);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 30px;
    color: #fff;
    background: var(--dp-accent);
}
.date-tag:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 15px 10px 15px 0;
    border-color: transparent var(--dp-card) transparent transparent;
}
.date-tag__fold {
    position: absolute;
    top: 100%;
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--dp-accent-deep);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
article header { display: flow-root; width: 100%; margin-bottom: 14px; }
.title { margin: 0 0 8px; clear: both; font-size: clamp(22px, 2.6vw, 27px); line-height: 1.2; }
.title a { color: var(--dp-ink) }
.title a:hover { color: var(--dp-accent) }
.post-info {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    width: 100%;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--dp-muted);
}
.post-info a { color: var(--dp-muted) }
.post-info a:hover { color: var(--dp-accent) }
.post-info i { margin-right: 6px; font-size: 15px; color: var(--dp-accent); vertical-align: -1px; }
.post-content { font-size: 16px; line-height: 1.7 }
.post-content p:last-child { margin-bottom: 0 }

/* Download button */
.download-wrap { float: right; margin-top: 16px; }
.download-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px 10px 12px;
    font-family: var(--dp-font-head);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    color: #fff;
    background: linear-gradient(120deg, var(--dp-accent-deep), var(--dp-accent) 55%, var(--dp-accent-bright));
    background-size: 200% 100%;
    background-position: 0 0;
    border-radius: 999px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--dp-accent) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, background-position 0.45s ease;
}
.download-btn:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(-160%) skewX(-20deg);
    animation: dp-shine 3.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.download-btn__icon, .download-btn__text { position: relative; z-index: 1; }
.download-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.download-btn:hover, .download-btn:focus-visible {
    color: #fff;
    background-position: 100% 0;
    transform: translateY(-3px);
    box-shadow: 0 16px 26px -10px color-mix(in srgb, var(--dp-accent) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.download-btn:hover .download-btn__icon, .download-btn:focus-visible .download-btn__icon { background: rgba(255, 255, 255, 0.32); }
.download-btn:hover .download-btn__icon svg, .download-btn:focus-visible .download-btn__icon svg { animation: dp-arrow 0.8s ease-in-out infinite; }
.download-btn:active { transform: translateY(0) scale(0.97); box-shadow: 0 6px 12px -8px var(--dp-accent); }
@keyframes dp-shine {
    0%, 55% { transform: translateX(-160%) skewX(-20deg); }
    100% { transform: translateX(420%) skewX(-20deg); }
}
@keyframes dp-arrow {
    0%, 100% { transform: translateY(-2px); }
    50% { transform: translateY(3px); }
}

.breadcrumb { clear: both; margin: 0 0 12px; font-size: 13.5px; line-height: 24px; color: var(--dp-muted); }
.breadcrumb > span { display: inline-block; }
.breadcrumb__sep { padding: 0 6px; font-size: 11px; }
.breadcrumb a { color: var(--dp-muted) }
.breadcrumb a:hover { color: var(--dp-accent) }
.postsby { margin: 0 0 24px; font-size: clamp(26px, 3.4vw, 34px); }

/*--------------------------------------------------------------
# 9. Single post and page content
--------------------------------------------------------------*/
.single-title { float: none; margin: 4px 0 10px; font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.03em; }
.single_post header { margin-bottom: 16px }
.post-single-content { display: flow-root; width: 100%; font-size: 17px; line-height: 1.75; color: var(--dp-text); }
.post-single-content h2 { margin: 1.7em 0 0.55em }
.post-single-content h3 { margin: 1.5em 0 0.5em }
.post-single-content h4, .post-single-content h5, .post-single-content h6 { margin: 1.3em 0 0.5em }
.post-single-content > :first-child { margin-top: 0 }
/* Links in post content: underlined on hover only */
.post-single-content a:not(.wp-block-button__link):hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.post-single-content img:not(.wp-smiley):not(.avatar) { border-radius: var(--dp-radius-media) }
.article ul { margin: 1.2em 0 1.3em 1.5em; list-style-type: disc; }
.article ol { margin: 1.2em 0 1.3em 1.7em; list-style-type: decimal; }
.article ul li, .article ol li { margin-bottom: 6px }
.article li::marker { color: var(--dp-accent); font-weight: 700; }
.article ul ul, .article ol ol, .article ul ol, .article ol ul { margin-top: 6px; margin-bottom: 0; }
.commentlist, .related-posts, .tags { list-style: none }
blockquote {
    margin: 1.6em 0;
    padding: 16px 22px;
    background: var(--dp-soft);
    border-left: 4px solid var(--dp-accent);
    border-radius: 0 var(--dp-radius-media) var(--dp-radius-media) 0;
}
blockquote p:last-child { margin-bottom: 0 }

/* Donation Page template: full width, no sidebar, transparent wrapper so the page's own cards show */
.donation-page .article { float: none; width: 100%; max-width: 900px; margin: 0 auto 30px; }
.donation-page .single_post { padding: 0; background: none; border: 0; box-shadow: none; }
.donation-page .single_post header { text-align: center; margin-bottom: 18px; }
.donation-page .single-title { margin: 0; }

/*--------------------------------------------------------------
# 10. Sidebar and widgets
--------------------------------------------------------------*/
.sidebar { float: right; width: 340px; max-width: 100%; font-size: 15px; line-height: 1.55; }
.sidebar a { color: var(--dp-ink) }
.sidebar a:hover { color: var(--dp-accent) }
.sidebar p { line-height: 1.6 }
.widget { margin-bottom: 22px; overflow: hidden; }
.sidebar .widget {
    padding: 22px 24px 24px;
    background: var(--dp-card);
    border: 1px solid var(--dp-line);
    border-radius: var(--dp-radius-card);
    box-shadow: var(--dp-shadow);
}
.widget select { width: 100%; max-width: 100%; height: 42px; padding: 0 12px; }
.widget > h3, .widget > .widget-title {
    position: relative;
    margin: 0 0 16px;
    padding-left: 14px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}
.widget > h3:before, .widget > .widget-title:before {
    content: "";
    position: absolute;
    top: 0.16em;
    bottom: 0.16em;
    left: 0;
    width: 4px;
    background: var(--dp-accent);
    border-radius: 4px;
}
.widget ul { list-style: none }
.widget li {
    margin: 0;
    padding: 10px 0;
    list-style-type: none;
    border-bottom: 1px dashed var(--dp-line-strong);
}
.widget li:first-child { padding-top: 0 }
.widget li:last-child { padding-bottom: 0; border-bottom: 0; }
.widget li > ul, .widget li > ol { margin: 10px 0 0 14px }
/* Widget lists (Recent Posts, Recent Comments, Top Posts, Popular Posts, ...): underline on hover */
.widget li a:hover,
.widget_recent_entries a:hover,
.widget_recent_comments a:hover,
.widget_top-posts a:hover,
.widget_rpwe_widget a:hover,
.widget .wpp-list a:hover,
footer .widget a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.widget .tagcloud a:hover, .widget .social-profile-icons a:hover { text-decoration: none }
.widget .textwidget a { text-decoration: underline; text-decoration-color: var(--dp-line-strong); text-underline-offset: 3px; }
.widget .textwidget a:hover { color: var(--dp-accent-deep) }
.widget .textwidget a[style], .widget .textwidget a[class] { text-decoration: none }
.widget .textwidget img { border-radius: var(--dp-radius-media) }
.sidebar .wp-post-image, footer .wp-post-image { margin: 4px 12px 0 0; border-radius: 10px; float: left; }

/* Search form */
.search-form { float: none; clear: both; width: 100%; }
.search-form fieldset {
    display: flex;
    width: 100%;
    min-width: 0;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--dp-line-strong);
    border-radius: 999px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-form fieldset:focus-within { border-color: var(--dp-accent); box-shadow: 0 0 0 3px var(--dp-ring); }
.search-form input[type="search"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 9px 16px;
    line-height: 1.3;
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
}
.search-form input[type="search"]:focus { outline: 0; box-shadow: none; }
.search-form input[type="submit"], .comment-form .form-submit :is(input, button), .reply-submit {
    flex: none;
    padding: 9px 20px;
    font-family: var(--dp-font-head);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: var(--dp-accent);
    border: 0;
    border-radius: 999px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.search-form input[type="submit"]:hover { background: var(--dp-accent-deep) }
.article .search-form fieldset { max-width: 460px }

/* Tag cloud */
.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tagcloud a {
    padding: 5px 13px;
    font-size: 13.5px !important;
    line-height: 1.4;
    color: var(--dp-accent-deep);
    background: var(--dp-soft);
    border: 1px solid var(--dp-line);
    border-radius: 999px;
}
.tagcloud a:hover, .sidebar .tagcloud a:hover { color: #fff; background: var(--dp-accent); border-color: var(--dp-accent); }

/* Calendar */
#wp-calendar { margin-bottom: 0; font-size: 14px; border: 0; border-radius: 0; }
#wp-calendar caption { padding-bottom: 10px; font-family: var(--dp-font-head); font-size: 16px; font-weight: 700; color: var(--dp-ink); }
#wp-calendar th, #wp-calendar td { padding: 7px 0; text-align: center; border: 0; }
#wp-calendar thead th { background: var(--dp-soft); border-radius: 0 }
#wp-calendar tbody td a { display: inline-block; min-width: 28px; font-weight: 700; line-height: 28px; color: var(--dp-accent-deep); background: var(--dp-soft); border-radius: 50%; }
#wp-calendar tbody td#today { color: var(--dp-ink); font-weight: 700; }
#wp-calendar tfoot td { padding-top: 10px }
#wp-calendar #prev { text-align: left }
#wp-calendar #next { text-align: right }

/* Social icons widget */
.social-profile-icons ul { display: flex; flex-wrap: wrap; gap: 8px; }
.social-profile-icons ul li { margin: 0; padding: 0; border: 0; }
.social-profile-icons ul li a {
    display: block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: #fff !important;
    background: var(--dp-accent);
    border-radius: 12px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.social-profile-icons ul li a:hover { background: var(--dp-deep); transform: translateY(-2px); }
.social-profile-icons ul li i { margin: 0; font-size: 16px; line-height: 38px; color: inherit; }
.social-profile-icons .social-youtube a { background: #C9322B }
.social-profile-icons .social-rss a { background: #D97A17 }
.social-profile-icons .social-twitter a { background: #14171A }
.social-profile-icons .social-facebook a { background: #4A6FC0 }
.social-profile-icons .social-vimeo a { background: #1F9FBF }
.social-profile-icons .social-dribbble a { background: #D94A83 }
.social-profile-icons .social-tumblr a { background: #426D9B }
.social-profile-icons .social-instagram a { background: #B03A6E }
.social-profile-icons .social-flickr a { background: #D63384 }
.social-profile-icons .social-pinterest a { background: #D2242C }
.social-profile-icons .social-linkedin a { background: #1F7BB0 }
.social-profile-icons .social-github a { background: #333A45 }
.social-profile-icons .social-behance a { background: #1879FD }
.social-profile-icons .social-soundcloud a { background: #E0621D }
.social-profile-icons .social-dropbox a { background: #3476E4 }
.social-profile-icons .social-reddit a { background: #E03D00 }
.social-profile-icons ul li a:hover { background: var(--dp-deep) !important; }

/*--------------------------------------------------------------
# 11. Related posts, author box, tags
--------------------------------------------------------------*/
.related-posts { float: left; clear: both; width: 100%; margin-top: 28px; padding: 24px 0 0; border-top: 1px dashed var(--dp-line-strong); }
.postauthor-top { margin-bottom: 14px }
.related-posts h3 { margin: 0; font-size: 20px; color: var(--dp-ink); }
.related-posts .post.excerpt {
    float: left;
    clear: none;
    width: calc((100% - 6%) / 3);
    margin: 0 3% 16px 0;
    padding: 0;
    overflow: hidden;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.related-posts .post.excerpt.last { margin-right: 0 }
.related-link { display: block; width: 100%; color: var(--dp-ink) }
.related-link:hover { color: var(--dp-accent) }
.related-link:hover .title { text-decoration: underline; text-underline-offset: 3px; }
.related-posts .featured-thumbnail { display: block; width: 100%; max-width: 200px; }
.related-posts .featured-thumbnail img { display: block; width: 100%; border-radius: var(--dp-radius-media); }
.thumb-placeholder {
    display: flex !important;
    align-items: center;
    justify-content: center;
    aspect-ratio: 8 / 5;
    color: var(--dp-accent);
    background: var(--dp-soft);
    border: 1px solid var(--dp-line);
    border-radius: var(--dp-radius-media);
}
.related-posts .title {
    float: left;
    width: 100%;
    margin: 0;
    padding-top: 10px;
    font-family: var(--dp-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}
.postauthor {
    float: left;
    clear: both;
    display: flow-root;
    width: 100%;
    min-height: 125px;
    margin: 26px 0 8px;
    padding: 20px 22px;
    background: var(--dp-soft);
    border: 1px solid var(--dp-line);
    border-radius: 18px;
}
.postauthor h4 { margin-bottom: 10px; font-size: 17px; font-weight: 700; }
.postauthor h5 { margin: 0; padding: 0; font-size: 15px; line-height: 1.5; text-transform: capitalize; }
.postauthor p { margin: 4px 0 0; font-size: 15px; line-height: 1.6; }
.postauthor img { float: left; margin: 4px 20px 6px 0; border-radius: 50%; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; float: left; width: 100%; margin: 24px 0 4px; }
.tags .tagtext { font-size: 14px; font-weight: 700; color: var(--dp-muted); margin-right: 2px; }
.tags a {
    padding: 4px 13px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--dp-accent-deep);
    background: var(--dp-soft);
    border: 1px solid var(--dp-line);
    border-radius: 999px;
}
.tags a:hover { color: #fff; background: var(--dp-accent); border-color: var(--dp-accent); }

/*--------------------------------------------------------------
# 12. Comments and forms
--------------------------------------------------------------*/
input, textarea, select { padding: 10px 14px; font-size: 15px; color: var(--dp-ink); }
input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], input[type="tel"], textarea, select {
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--dp-line-strong);
    border-radius: var(--dp-radius-field);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    border-color: var(--dp-accent);
    box-shadow: 0 0 0 3px var(--dp-ring);
}
button, input, optgroup, select, textarea { color: inherit; font: inherit; font-size: 15px; margin: 0; }
button { overflow: visible }
button, select { text-transform: none }
legend { border: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
textarea { overflow: auto; resize: vertical; width: 100%; padding: 12px 14px; }
::placeholder { color: #657786; opacity: 1; }
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.avatar { border-radius: 50%; }
#comments { clear: both; width: 100%; margin: 32px 0 0; padding: 26px 0 0; border-top: 1px dashed var(--dp-line-strong); }
.total-comments {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-family: var(--dp-font-head);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dp-ink);
}
.total-comments:before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--dp-accent-bright), var(--dp-accent));
}
ol.commentlist, ol.commentlist ol.children { margin: 0; padding: 0; list-style: none; }
.commentlist li { margin: 0; padding: 0; list-style: none; border: 0; }
.commentlist > li { margin-bottom: 16px; }
.comment-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--dp-line);
    border-radius: 18px;
    box-shadow: 0 10px 24px -20px rgba(20, 23, 26, 0.45);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.comment-card:hover { border-color: var(--dp-line-strong) }
.comment-card:target { border-color: var(--dp-accent); box-shadow: 0 0 0 3px var(--dp-ring); }
.comment-avatar { flex: 0 0 auto; }
.comment-avatar .avatar { display: block; width: 56px; height: 56px; margin: 0; border: 3px solid var(--dp-soft); box-sizing: content-box; }
.comment-body { flex: 1 1 auto; min-width: 0; }
.comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; }
.comment-head .fn, .comment-head .fn a { font-family: var(--dp-font-head); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--dp-ink); font-style: normal; }
.comment-badge {
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--dp-accent);
    border-radius: 999px;
}
.comment-time, .comment-edit a { font-size: 13px; color: var(--dp-muted); }
.comment-time:hover, .comment-edit a:hover { color: var(--dp-accent); }
.comment-edit:before { content: "\00b7"; margin-right: 8px; color: var(--dp-line-strong); }
.comment-text { overflow-wrap: anywhere; line-height: 1.7; color: var(--dp-text); }
.comment-text p { margin: 0 0 10px; line-height: 1.7; }
.comment-text p:last-child { margin-bottom: 0; }
.comment-text a { text-decoration: underline; }
.comment-awaiting-moderation {
    display: inline-block;
    margin: 0 0 8px;
    padding: 4px 12px;
    font-size: 13px;
    font-style: italic;
    font-weight: 600;
    color: #8A5A00;
    background: #FFF4D6;
    border-radius: 999px;
}
.comment-body .reply { margin-top: 12px; }
.comment-reply-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 28px;
    color: var(--dp-accent-deep);
    background: var(--dp-soft);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.comment-reply-link:before { content: "\21b3"; font-size: 14px; }
.comment-reply-link:hover { color: #fff; background: var(--dp-accent); transform: translateY(-1px); }
/* Replies: see "Reply indent" below */
.commentlist .children > li { margin-bottom: 12px }

/* The post author's comments (any level): indigo tint, solid bar on the left */
.commentlist li.bypostauthor > .comment-card {
    background: linear-gradient(90deg, color-mix(in srgb, var(--dp-accent) 11%, #fff), #fff 75%);
    border-color: color-mix(in srgb, var(--dp-accent) 35%, var(--dp-line));
}
.commentlist li.bypostauthor > .comment-card .avatar { border-color: var(--dp-accent); }
.commentlist li.bypostauthor > .comment-card .comment-head .fn,
.commentlist li.bypostauthor > .comment-card .comment-head .fn a { color: var(--dp-accent); }
/* ===== Reply indent fix: works by comment depth, not by list nesting ===== */
/* 1. stop the nested lists from indenting (the cards are indented instead) */
.commentlist .children,
.commentlist ol.children,
.commentlist ul.children {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
}
/* 2. every reply card moves to the right by its depth */
.commentlist li.depth-2 > .comment-card,
.commentlist li.depth-2 > article { margin-left: 15px !important; }
.commentlist li.depth-3 > .comment-card,
.commentlist li.depth-3 > article { margin-left: 30px !important; }
.commentlist li.depth-4 > .comment-card,
.commentlist li.depth-4 > article { margin-left: 60px !important; }
.commentlist li.depth-5 > .comment-card,
.commentlist li.depth-5 > article { margin-left: 90px !important; }
/* 3. colour-coded bar on the left of each reply level */
.commentlist li.depth-2 > .comment-card { box-shadow: inset 5px 0 0 #FFAD1F; }
.commentlist li.depth-3 > .comment-card { box-shadow: inset 5px 0 0 #17BF63; }
.commentlist li.depth-4 > .comment-card,
.commentlist li.depth-5 > .comment-card { box-shadow: inset 5px 0 0 #E0245E; }
/* ===== Reply chain: a connector line ties every reply to the comment it answers ===== */
.commentlist .children { margin-top: 14px !important; }
.commentlist .children > li {
    --chain: color-mix(in srgb, var(--dp-accent) 55%, #fff);
    --cy: 49px;
    position: relative;
}
.commentlist li.depth-2 { --tx: 7px;  --ew: 8px; }
.commentlist li.depth-3 { --tx: 22px; --ew: 8px; }
.commentlist li.depth-4 { --tx: 37px; --ew: 23px; }
.commentlist li.depth-5 { --tx: 67px; --ew: 23px; }
/* vertical line: starts under the parent card and runs down the reply group */
.commentlist .children > li:before {
    content: "";
    position: absolute;
    left: var(--tx);
    top: -14px;
    bottom: 0;
    width: 2px;
    background: var(--chain);
    border-radius: 2px;
}
/* the last reply of a group ends its line at its own card */
.commentlist .children > li:last-child:before { bottom: auto; height: calc(var(--cy) + 15px); }
/* horizontal arm that joins the line to the reply card */
.commentlist .children > li:after {
    content: "";
    position: absolute;
    left: var(--tx);
    top: calc(var(--cy) - 1px);
    width: var(--ew);
    height: 2px;
    background: var(--chain);
    border-radius: 2px;
}
/* small chain badge in the reply header (links to the parent comment) */
.comment-chain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--dp-link);
    background: color-mix(in srgb, var(--dp-accent) 14%, #fff);
    border-radius: 50%;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.comment-chain:hover, .comment-chain:focus-visible { color: #fff; background: var(--dp-accent); }
/* the reply form, when it opens under a comment, lines up with that reply */
.commentlist li.depth-1 > #respond { margin-left: 45px; }
.commentlist li.depth-2 > #respond { margin-left: 90px; }
.commentlist li.depth-3 > #respond { margin-left: 130px; }
/* post author keeps its blue bar at any depth */
.commentlist li.bypostauthor > .comment-card.comment-card {
    box-shadow: inset 5px 0 0 var(--dp-accent) !important;
}
/* mobile: smaller indents */
@media (max-width: 720px) {
    .commentlist li.depth-2 > .comment-card { margin-left: 14px !important; }
    .commentlist li.depth-3 > .comment-card { margin-left: 28px !important; }
    .commentlist li.depth-4 > .comment-card,
    .commentlist li.depth-5 > .comment-card { margin-left: 40px !important; }
    .commentlist li.depth-1 > #respond { margin-left: 14px; }
    .commentlist li.depth-2 > #respond { margin-left: 28px; }    .commentlist .children > li { --cy: 37px; }
    .commentlist li.depth-2 { --tx: 6px;  --ew: 8px; }
    .commentlist li.depth-3 { --tx: 20px; --ew: 8px; }
    .commentlist li.depth-4 { --tx: 34px; --ew: 6px; }
    .commentlist li.depth-5 { --tx: 34px; --ew: 6px; }
}

.comments-nav { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.comments-nav a { display: inline-block; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--dp-accent-deep); background: var(--dp-soft); border-radius: 999px; }
.comments-nav.bottomnav { margin: 16px 0 0; }

/* Comment form */
#commentsAdd { clear: both; width: 100%; margin-top: 28px; }
#respond { position: relative; padding: 24px; background: var(--dp-bg); border: 1px solid var(--dp-line); border-radius: 20px; }
.commentlist #respond { margin: 12px 0 0; background: #fff; }
#respond h3, .comment-reply-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 16px;
    font-family: var(--dp-font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--dp-ink);
}
.comment-reply-title small { font-size: 13px; font-weight: 600; }
#cancel-comment-reply-link {
    display: inline-block;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    color: #8A1C1C;
    background: #FBE9E7;
    border-radius: 999px;
    cursor: pointer;
}
#cancel-comment-reply-link:hover { background: #F5CFC9; }
.comment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.comment-form > p { margin: 0; grid-column: 1 / -1; }
.comment-form .comment-form-author, .comment-form .comment-form-email { grid-column: auto; }
.comment-form label { display: block; padding: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--dp-ink); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-family: var(--dp-font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--dp-ink);
}
.comment-form textarea { min-height: 140px; line-height: 1.6; }
.comment-form input:focus, .comment-form textarea:focus { outline: 0; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; }
.comment-form .comment-form-cookies-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--dp-accent); }
.comment-form .comment-form-cookies-consent label { display: inline; padding: 0; font-weight: 400; line-height: 1.5; cursor: pointer; }
.comment-form .form-submit { margin: 4px 0 0; }
.comment-form .form-submit :is(input, button) { padding: 12px 30px; font-size: 15px; }
.comment-form .form-submit :is(input, button):hover { background: var(--dp-accent-deep); transform: translateY(-1px); }
.required, .comment-notes, .form-allowed-tags { display: none; }
.comment-form .logged-in-as { font-size: 14px; color: var(--dp-muted); }
.nocomments { color: var(--dp-muted) }

/*--------------------------------------------------------------
# 13. Pagination
--------------------------------------------------------------*/
.pagination, .posts-navigation { clear: both; float: left; width: 100%; margin: 0; }
.pagination .nav-links, .posts-navigation .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.posts-navigation .nav-links { justify-content: space-between; }
.page-numbers, .page-links .post-page-numbers, .nav-previous a, .nav-next a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    font-family: var(--dp-font-head);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--dp-ink);
    background: var(--dp-card);
    border: 1px solid var(--dp-line-strong);
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.page-numbers.current, .page-links .post-page-numbers.current { color: #fff; background: var(--dp-accent); border-color: transparent; }
a.page-numbers:hover, .page-links a.post-page-numbers:hover, .nav-previous a:hover, .nav-next a:hover { color: #fff; background: var(--dp-accent); border-color: transparent; }
.page-numbers.dots { background: transparent; border-color: transparent; min-width: 0; padding: 0 4px; }
.nav-previous { float: left }
.nav-next { float: right }
.page-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; clear: both; margin: 14px 0 16px; }
.page-links-title { font-weight: 700; color: var(--dp-muted); }

/*--------------------------------------------------------------
# 14. Footer (widget columns only, no credit line)
--------------------------------------------------------------*/
#site-footer {
    clear: both;
    width: 100%;
    margin-top: 24px;
    overflow: hidden;
    color: #AAB8C2;
    background: var(--dp-deep);
    border-radius: 34px 34px 0 0;
}
.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 44px;
    width: 100%;
    padding: 40px 0 22px;
}
.footer-widget { position: relative; color: #AAB8C2; }
#site-footer p { color: #AAB8C2 }
#site-footer .widget { margin-bottom: 22px }
#site-footer .widget > h3 { font-size: 19px; color: #fff; }
#site-footer .widget > h3:before { background: var(--dp-accent) }
#site-footer .widget a { color: #E1E8ED }
#site-footer .widget a:hover { color: #fff }
#site-footer .widget li { border-bottom-color: rgba(255, 255, 255, 0.16) }
#site-footer .tagcloud a { color: #E1E8ED; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); }
#site-footer .tagcloud a:hover { color: #fff; background: var(--dp-accent); border-color: var(--dp-accent); }
#site-footer .search-form fieldset { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); }
#site-footer .search-form input[type="search"] { color: #fff }
#site-footer ::placeholder { color: #8899A6 }
#site-footer .widget select { color: var(--dp-ink) }

/*--------------------------------------------------------------
# 15. WordPress core classes
--------------------------------------------------------------*/
.article img.alignleft, .wp-caption.alignleft { display: block; float: left; margin: 0.3em 1.6em 0.6em 0; }
.article img.alignright, .wp-caption.alignright { display: block; float: right; margin: 0.3em 0 0.6em 1.6em; }
.article img.aligncenter, .wp-caption.aligncenter { display: block; float: none; clear: both; margin: 1em auto; }
.article img.alignnone { display: block; clear: both; margin: 1em 0; }
.wp-caption { max-width: 100%; margin-bottom: 1.5em; padding: 6px; background: var(--dp-soft); border: 1px solid var(--dp-line); border-radius: 16px; }
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; }
.wp-caption .wp-caption-text { margin: 0.5em 0 0.2em; }
.wp-caption-text, .gallery-caption { text-align: center; font-size: 14px; color: var(--dp-text); }
.gallery { display: grid; gap: 10px; margin-bottom: 1.5em; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr) }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr) }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr) }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr) }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr) }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr) }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr) }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr) }
.gallery-item { margin: 0; text-align: center; }
embed, iframe, object { max-width: 100% }
.wp-smiley { margin: 0; padding: 0; border: none; }
.wp-block-button__link {
    padding: 11px 24px;
    font-family: var(--dp-font-head);
    font-weight: 600;
    color: #fff;
    background: var(--dp-accent);
    border-radius: 999px;
}
.wp-block-button__link:hover { color: #fff; background: var(--dp-accent-deep); }
.wp-block-separator { height: 1px; background: var(--dp-line-strong); border: 0; }
.wp-block-quote, .wp-block-pullquote { border-color: var(--dp-accent) }
.wp-block-image img { border-radius: var(--dp-radius-media) }
.wp-block-table table { border-radius: var(--dp-radius-media) }

/*--------------------------------------------------------------
# 16. Accessibility and motion
--------------------------------------------------------------*/
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}
.screen-reader-text:focus {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 3px var(--dp-accent);
    clip: auto !important;
    clip-path: none;
    color: var(--dp-accent-deep);
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 8px;
    line-height: normal;
    padding: 15px 23px 14px;
    top: 8px;
    width: auto;
    z-index: 100000;
}
#content:focus { outline: 0 }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid var(--dp-accent);
    outline-offset: 2px;
}
#site-footer a:focus-visible, #site-footer input:focus-visible, #navigation.mobile-menu-wrapper a:focus-visible, a#pull:focus-visible { outline-color: var(--dp-edge) }
.download-btn:focus-visible { outline-color: var(--dp-edge) }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto }
    *, *:before, *:after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/*--------------------------------------------------------------
# 17. Responsive
--------------------------------------------------------------*/
@media screen and (max-width: 1160px) {
    #page, .container { max-width: 94% }
}
@media screen and (max-width: 900px) {
    .article { float: none; width: 100%; }
    .sidebar { float: none !important; width: 100%; }
}
@media screen and (max-width: 865px) {
    .site-branding { float: none; text-align: center; }
    .site-title { font-size: clamp(30px, 8vw, 40px); }
    .widget-header-item { float: none; max-width: 550px; margin: 12px auto 0; }
    div.primary-navigation { margin-top: 14px }
    a#pull {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 3%;
        padding: 0 20px;
        font-family: var(--dp-font-head);
        font-size: 15px;
        font-weight: 600;
        line-height: 48px;
        color: #fff;
        background: var(--dp-deep);
        border-radius: 16px;
    }
    a#pull:hover { color: #fff }
    a#pull:after { content: '\f0c9'; font-family: "dupeon-icons"; font-weight: normal; }

    /* slide-in drawer */
    .main-container { position: relative; left: 0; transition: left 500ms ease; }
    .mobile-menu-active .main-container { left: 300px; }
    #navigation.mobile-menu-wrapper {
        display: block;
        position: fixed;
        top: 0;
        left: -300px;
        width: 300px;
        height: 100%;
        padding: 18px 12px 30px;
        z-index: 9999;
        overflow: auto;
        color: #fff;
        background: var(--dp-deep);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transition: left 500ms ease;
    }
    .mobile-menu-active #navigation.mobile-menu-wrapper { left: 0 }
    #navigation .menu { display: block !important; float: left; width: 100%; }
    #navigation li, #navigation ul li, #navigation ul ul li { float: left; position: relative; width: 100% !important; background: transparent; }
    #navigation a, #navigation ul ul a, #navigation .menu a {
        width: 100%;
        padding: 0 20px;
        font-family: var(--dp-font-head);
        font-size: 16px;
        font-weight: 600;
        line-height: 48px;
        color: #fff !important;
        background: transparent;
        border-radius: 12px;
    }
    #navigation a:hover, #navigation li:hover > a { color: #fff; background: rgba(255, 255, 255, 0.1); }
    #navigation ul li.current-menu-item > a,
    #navigation ul li.current_page_item > a,
    #navigation ul li.current-menu-ancestor > a,
    #navigation ul li.current-cat > a { background: rgba(255, 255, 255, 0.18) }
    #navigation ul ul {
        position: static;
        float: left;
        width: 100%;
        margin: 0;
        padding: 0 0 0 12px;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    #navigation ul ul:before { display: none }
    #navigation ul ul a { font-size: 15px; font-weight: 500; line-height: 42px; color: #E1E8ED !important; }
    #navigation ul ul .menu-item-has-children > a, #navigation ul ul .cat-parent > a { padding-right: 20px }
    .menu-item-has-children > a:after, .cat-parent > a:after,
    #navigation ul ul .menu-item-has-children > a:after, #navigation ul ul .cat-parent > a:after { content: '' }
    #navigation .toggle-caret {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 48px;
        height: 48px;
        line-height: 48px;
        color: #fff;
        text-align: center;
    }
    #navigation .toggle-caret i { line-height: 48px }
    #mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        display: none;
        cursor: pointer;
        background: rgba(20, 23, 26, 0.55);
    }
    .mobile-menu-active #mobile-menu-overlay { display: block }
    html.noscroll { position: fixed; overflow-y: scroll; width: 100%; }
}
@media screen and (max-width: 720px) {
    :root { --dp-pad: 20px; }
    .single_post { --dp-pad: 22px; padding-top: 22px; }
    #page { padding-top: 24px }
    .post.excerpt { padding: 20px var(--dp-pad) 22px }
    .single-title { font-size: 28px }
    #site-footer { border-radius: 26px 26px 0 0 }
    .comment-form { grid-template-columns: minmax(0, 1fr); }
    .comment-form .comment-form-author, .comment-form .comment-form-email { grid-column: 1 / -1; }
    .comment-card { padding: 14px; gap: 12px; }
    .comment-avatar .avatar { width: 40px; height: 40px; }
    #respond { padding: 18px 16px; }
}
@media screen and (max-width: 600px) {
    .home-page .article, .search-area .article { grid-template-columns: minmax(0, 1fr); }
    .dp-js .view-switch { display: none }
    .dp-view-list .home-page .article > .post.excerpt,
    .dp-view-list .search-area .article > .post.excerpt { display: flex; }
    .dp-view-list .article > .post.excerpt .download-wrap { align-self: flex-end; margin-top: 16px; }
}
@media screen and (max-width: 550px) {
    .related-posts .post.excerpt { width: 48%; margin: 0 4% 16px 0; }
    .related-posts .post.excerpt.last { clear: left }
    .related-posts .post.excerpt:nth-of-type(2n) { margin-right: 0 }
}
@media screen and (max-width: 480px) {
    .footer-widgets { grid-template-columns: minmax(0, 1fr) }
    .download-wrap { float: none; clear: both; }
}