/*
Theme Name: Monrose - Poete Slameur
Theme URI: http://yannickmonrose.fr/
Author: Yannick Monrose
Author URI: http://yannickmonrose.fr/
Description: Theme officiel de Yannick Monrose, poete, slameur et artiste de la parole vivante. Un espace ou les mots brulent, ou les vers dansent, ou chaque ligne est une scene. Design chaleureux, expressif et vibrant, taille pour l'art du slam et de la poesie contemporaine.
Version: 1.0.0
Tags: orange, rouge, noir, gold, one-column, two-columns, right-sidebar, fixed-layout, custom-background, custom-header, custom-menu, featured-images, flexible-header, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
License: GNU General Public License, version 3 (GPLv3)
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

:root {
  --color-flame: #E8450A;
  --color-ember: #C93A08;
  --color-gold: #F0A500;
  --color-gold-light: #F7C74E;
  --color-ink: #1A1209;
  --color-charcoal: #2D2318;
  --color-smoke: #4A3B2F;
  --color-parchment: #FAF3E0;
  --color-cream: #FFF8EE;
  --color-fog: #EDE4D3;
  --color-accent-cool: #3A7CA5;
  --color-accent-purple: #7B3FA0;
  --color-white: #FFFFFF;
  --color-border: #D9C9A8;
  --color-border-dark: #5C4A35;
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Crimson Text', 'Georgia', serif;
  --font-accent: 'Special Elite', 'Courier New', monospace;
  --font-ui: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --shadow-soft: 0px 2px 8px rgba(26,18,9,0.12);
  --shadow-medium: 0px 4px 16px rgba(26,18,9,0.20);
  --shadow-flame: 0px 2px 12px rgba(232,69,10,0.30);
  --shadow-gold: 0px 2px 12px rgba(240,165,0,0.25);
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
  border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline;
}

html { font-size: 62.5%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { background: var(--color-cream); }
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section { display: block; }
ol, ul { list-style: none; }
img { -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before,blockquote:after,q:before,q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
a img { border: 0; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 28px;
  background-color: var(--color-parchment);
  color: var(--color-charcoal);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.wrapper { width: 100%; }

#masthead {
  width: 100%;
  padding: 0;
  position: relative;
  background: linear-gradient(160deg, var(--color-ink) 0%, var(--color-charcoal) 40%, #3D1F0A 75%, #1A0D04 100%);
  overflow: hidden;
}

#masthead::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 180%;
  background: radial-gradient(ellipse at top, rgba(240,165,0,0.18) 0%, rgba(232,69,10,0.10) 35%, transparent 65%);
  pointer-events: none;
}

#masthead::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--color-gold) 25%, var(--color-flame) 50%, var(--color-gold) 75%, transparent 100%);
}

#headimg { padding: 38px 30px 32px 30px; position: relative; z-index: 2; }
#headimg #logo-image { width: 100%; overflow: hidden; }
#headimg #logo-image img { max-width: 100%; height: auto; border: none; }
#headimg #logo-text { margin: 0; }
#headimg #logo-text .site-name { display: block; font-family: var(--font-display); font-size: 46px; line-height: 50px; font-weight: 700; letter-spacing: 1px; color: var(--color-cream); text-shadow: 0 0 40px rgba(240,165,0,0.50), 0 2px 4px rgba(0,0,0,0.60); }
#headimg #logo-text .site-name::first-letter { color: var(--color-gold); font-size: 1.15em; }
#headimg #logo-text .site-description { display: block; font-family: var(--font-accent); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--color-gold-light); margin-top: 8px; opacity: 0.85; }

#site-navigation { background: var(--color-ink); border: none; border-bottom: 2px solid var(--color-flame); box-shadow: 0px 3px 10px rgba(26,18,9,0.40); }

#main, #sidebar { margin: 24px 0; }
#main { padding: 36px 34px; background: var(--color-cream); border: solid 1px var(--color-border); border-top: 4px solid var(--color-flame); box-shadow: var(--shadow-medium); position: relative; }
#main::after { content: "\2726"; position: absolute; top: 10px; right: 14px; font-size: 12px; color: var(--color-gold); opacity: 0.5; }

.containter_footer { margin-bottom: 24px; }
#colophon { padding: 22px 0; font-size: 13px; font-family: var(--font-ui); letter-spacing: 0.5px; background: var(--color-ink); border: none; border-top: 3px solid var(--color-flame); color: var(--color-fog); box-shadow: var(--shadow-medium); }
.copyright { float: left; width: 580px; }
.copyright_inside { padding-left: 30px; }
.copyright_inside a, .copyright_inside a:visited { color: var(--color-gold-light); }
.credit { float: right; width: 340px; }
.credit_inside { padding-right: 30px; text-align: right; }
.credit_inside a, .credit_inside a:visited { color: var(--color-flame); }

p { font-family: var(--font-body); font-size: 17px; line-height: 28px; margin: 0 0 22px 0; color: var(--color-charcoal); }
p:last-child { margin-bottom: 0; }

h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); color: var(--color-ink); font-weight: 700; clear: both; line-height: 1.2; }
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a { font-weight: inherit; }
h1 { font-size: 38px; line-height: 44px; margin-bottom: 16px; }
h2 { font-size: 30px; line-height: 36px; margin-bottom: 20px; }
h3 { font-size: 22px; line-height: 28px; margin-bottom: 18px; color: var(--color-charcoal); }
h4 { font-size: 18px; line-height: 24px; margin-bottom: 18px; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 1px; color: var(--color-smoke); }
h5 { font-size: 15px; line-height: 21px; margin-bottom: 16px; font-family: var(--font-ui); letter-spacing: 0.5px; color: var(--color-smoke); }
h6 { font-size: 13px; line-height: 19px; margin-bottom: 22px; font-family: var(--font-accent); letter-spacing: 2px; text-transform: uppercase; color: var(--color-gold); }

strong { font-weight: 700; color: var(--color-ink); }
cite,em,i { font-style: italic; color: var(--color-smoke); }
small { font-size: 80%; }
pre { font-family: var(--font-accent); background: var(--color-ink); color: var(--color-gold-light); padding: 18px 24px; overflow: auto; border: none; border-left: 4px solid var(--color-flame); border-radius: var(--radius-md); margin-bottom: 22px; font-size: 14px; line-height: 22px; }
code,kbd { font-family: var(--font-accent); background: rgba(232,69,10,0.08); color: var(--color-ember); padding: 1px 5px; border-radius: var(--radius-sm); font-size: 90%; }
abbr,acronym,dfn { border-bottom: 1px dotted var(--color-border); cursor: help; }
address { display: block; margin: 0 0 22px 0; font-style: italic; color: var(--color-smoke); }
ins { color: var(--color-cream); background: var(--color-gold); text-decoration: none; padding: 0 3px; }
sup,sub { font-size: 10px; height: 0; line-height: 1; position: relative; vertical-align: baseline; }
sup { bottom: 1ex; }
sub { top: .5ex; }

blockquote { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 32px; padding: 22px 28px 22px 36px; margin: 28px 0; background: linear-gradient(135deg, rgba(240,165,0,0.07) 0%, rgba(232,69,10,0.04) 100%); border-left: 5px solid var(--color-flame); border-right: 1px solid var(--color-border); border-radius: 0 var(--radius-md) var(--radius-md) 0; position: relative; color: var(--color-charcoal); }
blockquote::before { content: "\201C"; font-family: var(--font-display); font-size: 72px; line-height: 1; color: var(--color-gold); opacity: 0.30; position: absolute; top: -8px; left: 6px; }
blockquote em, blockquote i { font-style: normal; }
blockquote cite { font-family: var(--font-ui); color: var(--color-flame); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; display: block; text-align: right; margin-top: 12px; font-style: normal; }
blockquote cite a { display: block; margin: 8px 0 0 0; color: var(--color-ember); }

a, a:visited { color: var(--color-flame); text-decoration: none; transition: color 0.20s ease; }
a:hover, a:focus { color: var(--color-gold); }
a img { border: none; }
a:focus, a:hover, a:active { outline: none; }
p a, p a:visited { line-height: inherit; border-bottom: 1px dotted rgba(232,69,10,0.40); }
p a:hover { border-bottom-color: var(--color-gold); }

ul, ol { margin: 0 0 20px 28px; }
ul { list-style: none; }
ul > li::before { content: "\25C6"; color: var(--color-flame); font-size: 8px; margin-right: 10px; vertical-align: 2px; }
ul ul { list-style: none; }
ul ul > li::before { content: "\25C7"; color: var(--color-gold); }
ul ul ul > li::before { content: "\00B7"; font-size: 14px; color: var(--color-smoke); }
ol { list-style: decimal; counter-reset: ol-counter; }
ol ol { list-style: upper-alpha; }
ol ol ol { list-style: lower-roman; }
ol ol ol ol { list-style: lower-alpha; }
ul ul, ul ol, ol ol, ol ul { margin: 4px 0 5px 28px; }
ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 5px; font-size: 98%; }
dl { margin-bottom: 20px; }
dt { font-weight: 700; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.5px; font-size: 13px; color: var(--color-flame); }
dd { margin-bottom: 16px; }

table { width: 95%; margin: 0 auto 22px auto; border-collapse: collapse; }
caption { font-family: var(--font-accent); font-weight: normal; font-size: 13px; letter-spacing: 1px; color: var(--color-smoke); margin: 0 0 8px 0; }
thead { color: var(--color-cream); background: linear-gradient(90deg, var(--color-ink) 0%, var(--color-charcoal) 100%); text-align: left; border-bottom: 2px solid var(--color-flame); }
thead th { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 1px; font-size: 12px; font-weight: 600; padding: 10px 12px; }
tbody { background: var(--color-cream); }
tbody tr:nth-child(even) { background: var(--color-fog); }
tbody tr:hover { background: rgba(232,69,10,0.06); }
td, th { padding: 9px 12px; border: 1px solid var(--color-border); }

form { margin-bottom: 22px; }
fieldset { margin-bottom: 22px; }
input[type="text"],input[type="password"],input[type="email"],textarea,select { font-family: var(--font-body); font-size: 16px; color: var(--color-charcoal); background: var(--color-cream); border: 1px solid var(--color-border); border-bottom: 2px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 12px; width: 95%; max-width: 100%; display: block; margin: 10px 0 20px 0; outline: none; transition: border-color 0.20s ease, box-shadow 0.20s ease; }
select { padding: 6px 12px; }
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,textarea:focus { border-bottom-color: var(--color-flame); box-shadow: 0 3px 0 rgba(232,69,10,0.20); }
textarea { min-height: 80px; }
label, legend { display: block; font-family: var(--font-ui); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-smoke); margin-bottom: 4px; }
input[type="checkbox"] { display: inline; }
button,input[type="submit"],input[type="reset"],input[type="button"] { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 20px 0; padding: 10px 24px; color: var(--color-cream); background: linear-gradient(135deg, var(--color-flame) 0%, var(--color-ember) 100%); border: none; text-decoration: none; border-radius: var(--radius-sm); outline: none; cursor: pointer; box-shadow: var(--shadow-flame); transition: all 0.20s ease; position: relative; overflow: hidden; }
button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover { color: var(--color-ink); background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%); border: none; box-shadow: var(--shadow-gold); transform: translateY(-1px); }

.searchform { width: 218px; background: var(--color-cream); border: solid 1px var(--color-border); border-bottom: 2px solid var(--color-flame); padding: 1px 0; margin: 0; overflow: auto; border-radius: var(--radius-sm); }
.searchform .assistive-text { display: none; }
.searchform input[type="text"] { width: 172px; float: left; padding: 7px 0 7px 12px; margin: 0; vertical-align: middle; border: 0; background: transparent; font-family: var(--font-body); font-style: italic; color: var(--color-smoke); }
.searchform input[type="submit"] { width: 33px; height: 35px; background: var(--color-flame); border: 0; cursor: pointer; text-indent: -9999px; vertical-align: middle; margin: 0; padding: 0; font-size: 0; display: block; line-height: 0; }
.searchform input[type="submit"]:hover { background-color: var(--color-gold); transform: none; box-shadow: none; }

.entry-content img,.author-content img,.comment-content img,.widget img { max-width: 100% !important; height: auto !important; }
img.alignleft { display: inline; float: left; margin: 20px 24px 20px 0; border: 3px solid var(--color-fog); box-shadow: var(--shadow-soft); }
img.alignright { display: inline; float: right; margin: 20px 0 20px 24px; border: 3px solid var(--color-fog); box-shadow: var(--shadow-soft); }
img.aligncenter, img.centered { display: block; margin: 24px auto; clear: both; border: 3px solid var(--color-fog); box-shadow: var(--shadow-medium); }

.alignleft { display: inline; float: left; margin-right: 22px; }
.alignright { display: inline; float: right; margin-left: 22px; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }

#sidebar { padding: 30px 0; background: var(--color-cream); font-size: 14px; border: solid 1px var(--color-border); border-top: 4px solid var(--color-gold); box-shadow: var(--shadow-medium); }
#sidebar a, #sidebar a:visited { color: var(--color-charcoal); text-decoration: none; transition: color 0.18s ease; }
#sidebar a:hover, #sidebar a:focus { color: var(--color-flame); }

.widget { padding: 0 26px; margin: 0 0 32px 0; }
.widget .widget-wrap { word-wrap: break-word; overflow: hidden; }
.widget select { width: 215px; padding: 6px 10px; }
.widget ul, .widget ol { margin: 0; padding: 0; list-style: none; }
.widget ul > li::before { content: none; }
.widget ul li, .widget ol li { margin: -2px 0 8px 0; padding: 0 0 7px 0; border-bottom: dotted 1px var(--color-border); color: var(--color-charcoal); }
.widget ul li:last-child, .widget ol li:last-child { border-bottom: none; }
.widget .widget-title { font-family: var(--font-display); font-size: 18px; line-height: 22px; padding: 0 0 10px 0; margin: 0 0 20px 0; border-bottom: 2px solid var(--color-flame); color: var(--color-ink); position: relative; }
.widget .widget-title::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--color-gold); border-radius: 50%; margin-right: 9px; vertical-align: 1px; box-shadow: 0 0 6px rgba(240,165,0,0.6); }

.type-post, .type-page { margin: 0 0 80px 0; }
.entry-title { font-family: var(--font-display); font-size: 30px; line-height: 36px; margin-bottom: 10px; font-weight: 700; border-bottom: 1px solid var(--color-border); padding-bottom: 12px; word-wrap: break-word; color: var(--color-ink); position: relative; }
.entry-title::after { content: ""; display: block; width: 50px; height: 3px; background: linear-gradient(90deg, var(--color-flame), var(--color-gold)); margin-top: 10px; }
.entry-title a, .entry-title a:visited { color: var(--color-ink); transition: color 0.18s ease; }
.entry-title a:focus, .entry-title a:hover { color: var(--color-flame); }

.entry-content { margin: 0 0 24px 0; word-wrap: break-word; font-size: 17px; line-height: 28px; color: var(--color-charcoal); }
.entry-meta { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.5px; color: var(--color-smoke); }
.entry-meta a, .entry-meta a:visited { color: var(--color-smoke); transition: color 0.18s ease; }
.entry-meta a:hover, .entry-meta a:focus { color: var(--color-flame); }
.entry-meta-sep { margin: 0 6px; color: var(--color-border); }
.entry-meta-featured { color: var(--color-gold); font-weight: 600; }

.menu { position: relative; margin: 0; padding: 0; z-index: 9999; }
.menu ul, .menu ul * { margin: 0; padding: 0; list-style: none; }
.menu ul { line-height: 1.0; }
.menu ul ul { position: absolute; top: -999em; width: 14em; background: var(--color-ink); border-top: 2px solid var(--color-flame); box-shadow: 0px 6px 18px rgba(26,18,9,0.40); }
.menu ul ul li { width: 100%; }
.menu ul li:hover { visibility: inherit; }
.menu ul li { float: left; position: relative; word-wrap: break-word; }
.menu ul li li { background: none; }
.menu ul li:hover ul, .menu ul li.sfHover ul { top: 56px; left: 0; z-index: 200; }
.menu ul li:hover li ul, .menu ul li.sfHover li ul { top: -999em; }
.menu ul li li:hover ul, .menu ul li li.sfHover ul { top: 0; }
.menu ul li { background: var(--color-ink); border-right: solid 1px rgba(255,255,255,0.06); }
.menu ul li:last-child { border-right: none; }
.menu ul.sub-menu li, .menu ul.children li { border: none; background: var(--color-charcoal); border-bottom: 1px solid rgba(255,255,255,0.05); }
.menu ul a, .menu ul a:visited { display: block; padding: 18px 22px; position: relative; text-decoration: none; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--color-fog); transition: color 0.18s ease, background 0.18s ease; }
.menu ul > li > a::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0%; height: 2px; background: var(--color-flame); transition: width 0.22s ease; }
.menu ul > li > a:hover::after, .menu ul > li.current-menu-item > a::after { width: 60%; }
.menu ul a:focus, .menu ul a:hover, .menu ul a:active { color: var(--color-gold-light); background: rgba(240,165,0,0.07); }

.type-post + .type-post { border-top: 1px solid var(--color-border); padding-top: 60px; }

.highlight-gold { color: var(--color-gold); font-weight: 700; }
.highlight-flame { color: var(--color-flame); font-style: italic; }

/* === LAYOUT v1.0.2 === */
#wrapper { width: 960px; margin: 0 auto; }
#page-wrapper { width: 960px; margin: 0 auto; }
#content-sidebar-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 20px; margin: 24px 0; }
#main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; padding: 36px 34px; background: var(--color-cream); border: solid 1px var(--color-border); border-top: 4px solid var(--color-flame); box-shadow: var(--shadow-medium); position: relative; }
#main::after { content: "\2726"; position: absolute; top: 10px; right: 14px; font-size: 12px; color: var(--color-gold); opacity: 0.5; }
#sidebar { width: 255px; -ms-flex-negative: 0; flex-shrink: 0; padding: 20px 0; background: var(--color-cream); font-size: 14px; border: solid 1px var(--color-border); border-top: 4px solid var(--color-gold); box-shadow: var(--shadow-medium); }
.pub-zone { width: 100%; text-align: center; margin: 14px 0; }
.pub-zone-avant-contenu { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 10px 0; background: rgba(240,165,0,0.03); }
.pub-zone-apres-contenu { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 10px 0; background: rgba(232,69,10,0.03); }
.pub-footer-banner { width: 100%; text-align: center; padding: 14px 0; background: var(--color-charcoal); border-bottom: 2px solid var(--color-flame); }
.pub-top-banner { width: 100%; background: var(--color-ink); text-align: center; padding: 8px 0; border-bottom: 1px solid rgba(240,165,0,0.2); }
.entry-featured-image-single { margin: 0 0 28px 0; clear: both; }
.entry-featured-image-single img { width: 100%; height: auto; display: block; border: 3px solid var(--color-fog); box-shadow: var(--shadow-medium); }
.tag-links a, .tag-links a:visited { color: var(--color-smoke); font-family: var(--font-ui); font-size: 11px; background: var(--color-fog); padding: 1px 6px; border-radius: var(--radius-sm); margin-right: 3px; }
.tag-links a:hover { color: var(--color-cream); background: var(--color-flame); }
.widget_tag_cloud a { display: inline-block; padding: 3px 9px; margin: 3px; color: var(--color-smoke); background: var(--color-fog); border-radius: var(--radius-sm); font-family: var(--font-ui); border: 1px solid var(--color-border); transition: all 0.18s ease; text-decoration: none; }
.widget_tag_cloud a:hover { color: var(--color-cream); background: var(--color-flame); border-color: var(--color-flame); }
.widget_categories ul li::before { content: none; }
#loop_meta_wrapper { margin: 0 0 24px 0; }
#loop-meta { background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-charcoal) 100%); border-left: 5px solid var(--color-flame); padding: 18px 30px; box-shadow: var(--shadow-medium); }
.loop-meta-title { font-family: var(--font-display); font-size: 20px; margin: 0; color: var(--color-cream); }
.loop-meta-description { color: var(--color-gold-light); font-family: var(--font-accent); font-size: 12px; margin: 4px 0 0 0; opacity: 0.85; }
#author-info { display: flex; align-items: flex-start; gap: 20px; padding: 20px; margin: 30px 0; background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-fog) 100%); border-left: 4px solid var(--color-gold); box-shadow: var(--shadow-soft); }
#author-avatar-inside img { border-radius: 50%; border: 3px solid var(--color-gold); box-shadow: 0 0 16px rgba(240,165,0,0.3); }
.section-divider { display: block; width: 100%; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--color-flame) 20%, var(--color-gold) 50%, var(--color-flame) 80%, transparent 100%); margin: 30px 0; border: none; opacity: 0.6; }
#comments { margin: 30px 0; }
.commentlist { list-style: none; margin: 0; padding: 0; }
.commentlist li.comment { background: var(--color-cream); margin: 0 0 20px 0; padding: 18px; border: 1px solid var(--color-border); border-left: 3px solid var(--color-fog); border-radius: var(--radius-md); }
.commentlist li.comment:hover { border-left-color: var(--color-gold); }
.commentlist li.bypostauthor { border-left-color: var(--color-flame); }
.commentlist .comment-author { padding-left: 70px; min-height: 60px; position: relative; }
.commentlist .avatar { position: absolute; top: 0; left: 0; border-radius: 50%; }
.commentlist .fn { display: block; font-family: var(--font-display); font-size: 15px; color: var(--color-ink); margin-bottom: 4px; }
.commentlist .children { list-style: none; margin: 16px 0 0 30px; padding: 0; }
#respond { margin: 20px 0 50px; }
#reply-title { font-family: var(--font-display); color: var(--color-ink); margin-bottom: 12px; }
#loop-nav-singlular-post { display: flex; justify-content: space-between; margin: 30px 0; padding: 20px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
#loop-nav-singlular-post .loop-nav-next { text-align: right; }
#loop-nav-singlular-post a { font-family: var(--font-ui); font-size: 12px; color: var(--color-charcoal); padding: 5px 11px; border: 1px solid var(--color-border); background: var(--color-cream); border-radius: var(--radius-sm); display: inline-block; transition: all 0.18s; }
#loop-nav-singlular-post a:hover { color: var(--color-cream); background: var(--color-flame); }
@media (max-width: 980px) { #wrapper, #page-wrapper { width: 100%; padding: 0 12px; box-sizing: border-box; } #content-sidebar-wrap { flex-direction: column; } #sidebar { width: 100%; } #main { padding: 20px 16px; } .copyright, .credit { float: none; width: 100%; text-align: center; } .copyright_inside, .credit_inside { padding: 6px 0; text-align: center; } }