/*
Theme Name: Choco Editorial
Theme URI: https://contracritica.com/
Author: OpenAI, adapted for Contra Crítica
Description: Classic chocolate-and-sepia editorial theme inspired by the supplied Choco Blogger template. Includes a responsive layout, customizable site identity, navigation, widgets, post formats and threaded comments.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: choco-editorial
Tags: blog, news, editorial, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root {
  --choco-bg: #3a2820;
  --choco-deep: #291b15;
  --choco-mid: #563a2b;
  --choco-ink: #33241c;
  --choco-accent: #b66b35;
  --choco-gold: #d7b27a;
  --choco-cream: #f4efe5;
  --choco-paper: #fbf8f1;
  --choco-rule: #ded5c7;
  --choco-text: #4a4038;
  --choco-muted: #827466;
  --choco-width: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--choco-bg);
  color: var(--choco-text);
  font: 15px/1.7 Arial, "Trebuchet MS", sans-serif;
  text-align: left;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button, input[type="submit"] { cursor: pointer; }
a { color: var(--choco-accent); text-decoration: none; transition: color .16s ease; }
a:hover, a:focus { color: #77371d; text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--choco-gold); outline-offset: 3px; }

#page { width: min(var(--choco-width), calc(100% - 34px)); margin: 0 auto; }
#headerwrapper { padding: 28px 12px 24px; min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
#logo { flex: 0 1 340px; min-width: 200px; }
.site-branding { display: flex; flex-direction: column; align-items: flex-start; }
.custom-logo-link { display: inline-flex; max-width: 100%; }
.custom-logo { display: block; max-height: 90px; width: auto; }
.site-title { margin: 0; color: #d69959; font: bold clamp(27px, 3.2vw, 38px)/1.12 "Trebuchet MS", Arial, sans-serif; letter-spacing: -.7px; }
.site-title a { color: #d69959; text-decoration: none; }
.site-title a:hover { color: #ffd7a5; }
.site-title .title-light { color: #ffd7a5; }
.site-description { margin: 9px 0 0; color: #c1ab7d; font-size: 10px; letter-spacing: 1.5px; line-height: 1.5; text-transform: uppercase; }

#nav { flex: 1 1 auto; display: flex; justify-content: flex-end; align-items: center; }
.menu-toggle { display: none; border: 1px solid #8c694e; border-radius: 4px; padding: 9px 13px; background: #503627; color: #fff2df; font-weight: bold; }
#primary-menu, .nav-menu { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px; list-style: none; margin: 0; padding: 0; }
#primary-menu li, .nav-menu li { margin: 0; padding: 0; }
#primary-menu a, .nav-menu a { display: block; padding: 10px 13px 11px; color: #fefefe; font-size: 11px; font-weight: bold; text-transform: uppercase; white-space: nowrap; border-radius: 4px; }
#primary-menu a:hover, #primary-menu .current-menu-item > a, #primary-menu .current_page_item > a,
.nav-menu a:hover, .nav-menu .current-menu-item > a, .nav-menu .current_page_item > a {
  color: #fff6e8; text-decoration: none;
  background: linear-gradient(#89502f, #63351f);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 2px 0 rgba(0,0,0,.17);
}
.sub-menu { display: block; list-style: none; padding-left: 14px; margin: 0; }

#mainwrapper {
  position: relative;
  background: var(--choco-paper);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.28);
}
#main-top { min-height: 13px; background: linear-gradient(180deg, #e2d4bd 0, #f4efe5 100%); border-bottom: 1px solid #e4d7c4; }
#main-bot { min-height: 240px; }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 255px; align-items: stretch; gap: 38px; padding: 30px 28px 46px 84px; }
.content-area { min-width: 0; padding: 0 0 24px; }

.post, .page-entry {
  position: relative;
  margin: 0 0 27px;
  padding: 0 0 29px;
  border-bottom: 1px solid var(--choco-rule);
}
.post:last-of-type { border-bottom: 0; }
.post h2, .post h1, .page-entry h1, .archive-title, .search-title {
  margin: 0 0 17px;
  color: #211a15;
  font: normal clamp(24px, 2.4vw, 30px)/1.2 "Trebuchet MS", Arial, sans-serif;
  letter-spacing: -.45px;
}
.post h2 a, .post h1 a, .page-entry h1 a { color: #211a15; text-decoration: none; }
.post h2 a:hover, .post h1 a:hover, .page-entry h1 a:hover { color: #954d24; }
.post-date {
  position: absolute; z-index: 1; top: -2px; left: -75px;
  width: 58px; min-height: 67px; padding: 8px 4px 7px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid #815238; border-radius: 4px;
  color: #f8d8b0; text-align: center; text-transform: uppercase;
  background: linear-gradient(145deg, #71462f 0%, #3e271b 100%);
  box-shadow: 0 2px 4px rgba(33,20,13,.23), inset 0 1px rgba(255,255,255,.16);
}
.post-date .day { display: block; font: bold 25px/.95 "Trebuchet MS", Arial, sans-serif; }
.post-date .month { display: block; margin-top: 5px; font-size: 10px; font-weight: bold; letter-spacing: .9px; }
.post-date .year { display: block; margin-top: 2px; font-size: 9px; opacity: .8; }
.post .entry, .page-entry .entry { color: #38312c; font-size: 14px; line-height: 1.8; }
.post .entry p, .page-entry .entry p { margin: 0 0 17px; }
.post .entry h1, .page-entry .entry h1 { font-size: 25px; }
.post .entry h2, .page-entry .entry h2 { margin-top: 26px; font-size: 22px; }
.post .entry h3, .page-entry .entry h3 { margin-top: 24px; font-size: 19px; }
.post .entry h4, .page-entry .entry h4 { font-size: 16px; }
.post .entry ul, .post .entry ol, .page-entry .entry ul, .page-entry .entry ol { padding-left: 25px; margin: 0 0 18px; }
.post .entry blockquote, .page-entry .entry blockquote { margin: 22px 0; padding: 4px 18px; border-left: 4px solid #b58a5c; color: #6b5748; font: italic 18px/1.6 Georgia, serif; }
.post .entry img, .page-entry .entry img { max-width: 100%; height: auto; padding: 3px; border: 1px solid #d4ccc0; background: #fff; box-shadow: 0 2px 8px rgba(35,24,17,.10); }
.post .entry table, .page-entry .entry table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.post .entry th, .post .entry td, .page-entry .entry th, .page-entry .entry td { padding: 8px; border: 1px solid #ddd2c2; text-align: left; }
.post .entry th, .page-entry .entry th { background: #e8dece; }
.post .entry pre, .page-entry .entry pre { max-width: 100%; overflow: auto; padding: 16px; background: #efe9de; border: 1px solid #ddd1bf; }
.alignleft { float: left; margin: .3em 1.2em .8em 0; }
.alignright { float: right; margin: .3em 0 .8em 1.2em; }
.aligncenter { display: block; margin: 1.2em auto; }
.wp-caption { max-width: 100%; padding: 5px; border: 1px solid #dfd7cd; background: #fff; text-align: center; }
.wp-caption-text { margin: 5px 0 0 !important; color: #807366; font-size: 12px; }
.gallery { display: flex; flex-wrap: wrap; gap: 12px; }
.gallery-item { margin: 0; }

.featured-image { margin: 3px 0 19px; }
.featured-image img { display: block; width: 100%; height: auto; padding: 5px; background: #fff; border: 1px solid #ded7ce; box-shadow: 0 2px 8px rgba(33,23,17,.10); }
.post-meta {
  position: relative; margin-top: 19px; padding: 11px 13px;
  border: 1px solid #ddd3c5; border-radius: 3px;
  background: linear-gradient(180deg, #fffdf9 0, #eee7dc 100%);
  color: #76695b; font: 11px/1.7 Verdana, Tahoma, Arial, sans-serif;
}
.post-meta p { margin: 0; }
.post-meta a { color: #854321; }
.post-meta .comments-link { float: right; margin-left: 12px; font-weight: bold; }
.more-link, .read-more { display: inline-block; margin-top: 4px; padding: 6px 11px; background: #5a3826; color: #fff0db; border-radius: 3px; font-size: 12px; font-weight: bold; }
.more-link:hover, .read-more:hover { background: #824c2d; color: #fff; text-decoration: none; }
.post.sticky h2:before { content: "Destacado"; display: inline-block; margin-right: 8px; padding: 3px 6px; vertical-align: middle; border-radius: 2px; background: #b78b59; color: #fff9ef; font: bold 9px Arial, sans-serif; letter-spacing: .4px; text-transform: uppercase; }

#sidebar {
  min-width: 0; position: relative; padding: 15px 17px 30px;
  color: #e9d9c5; background: linear-gradient(90deg, rgba(255,255,255,.015), transparent 15%, transparent 85%, rgba(0,0,0,.12)), #302119;
  border-left: 1px dashed #88694f; border-right: 1px dashed #88694f;
  box-shadow: inset 1px 0 rgba(255,255,255,.025), inset -1px 0 rgba(255,255,255,.025);
  font-size: 13px;
}
#sidebar:before, #sidebar:after { content: ""; position: absolute; left: 5px; right: 5px; height: 0; border-top: 1px dashed rgba(194,151,108,.46); }
#sidebar:before { top: 7px; }
#sidebar:after { bottom: 7px; }
#sidebar a { color: #f2d9a6; }
#sidebar a:hover { color: #fff8e7; }
.widget { margin: 8px 0 27px; }
.widget-title, #sidebar h2, #sidebar h3 {
  margin: 0 -9px 14px; padding: 10px 12px;
  color: #39271d; font: normal 19px/1.25 "Trebuchet MS", Arial, sans-serif;
  background: linear-gradient(180deg, #d8bd91 0%, #b99a6c 100%);
  border: 1px solid #9c7c52; border-radius: 3px;
  box-shadow: inset 0 1px rgba(255,255,255,.4), 0 2px 0 rgba(0,0,0,.2);
}
#sidebar ul { margin: 0; padding: 0; list-style: none; }
#sidebar li { position: relative; margin: 0; padding: 7px 2px 7px 17px; border-bottom: 1px solid rgba(213,180,143,.13); }
#sidebar li:before { content: "›"; position: absolute; left: 1px; top: 6px; color: #c79b62; font-size: 17px; line-height: 1.2; }
#sidebar li ul { margin: 6px 0 0 5px; }
#sidebar li li { border-bottom: 0; padding-top: 4px; padding-bottom: 4px; }
#sidebar .textwidget p { margin-top: 0; }
#sidebar .tagcloud { line-height: 2.2; }
#sidebar .tag-cloud-link { margin-right: 4px; }
#sidebar input[type="search"], #sidebar input[type="text"], #sidebar input[type="email"] { width: 100%; min-width: 0; padding: 9px 10px; background: #f4ebdc; border: 1px solid #8c6d51; border-radius: 3px; color: #38271d; }
#sidebar input[type="submit"], #sidebar button { margin-top: 7px; padding: 8px 12px; border: 1px solid #b08b5d; border-radius: 3px; background: #6a442b; color: #fff1dc; font-weight: bold; }
#sidebar .search-form { display: flex; flex-wrap: wrap; gap: 6px; }
#sidebar .search-form label { flex: 1 1 100%; }
#sidebar .search-form input[type="search"] { flex: 1 1 130px; }
#sidebar .search-form input[type="submit"] { margin-top: 0; }

.archive-header, .search-header { margin: 0 0 25px; padding: 0 0 15px; border-bottom: 1px solid var(--choco-rule); }
.archive-header .archive-description { color: #726459; font-size: 13px; }
.archive-title, .search-title { margin-bottom: 8px; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; position: absolute !important; white-space: nowrap; }
.navigation.pagination, .posts-navigation, .post-navigation { clear: both; margin: 25px 0 10px; padding: 15px 0 0; border-top: 1px solid var(--choco-rule); }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.page-numbers { display: inline-block; margin: 2px; padding: 6px 11px; border: 1px solid #d4c5b2; border-radius: 3px; background: #f0e8dc; color: #62422d; }
.page-numbers.current { background: #5a3826; border-color: #5a3826; color: #fff2df; }
.nav-previous a, .nav-next a { display: inline-block; padding: 8px 11px; border: 1px solid #ddd0bf; border-radius: 3px; background: #f0e8dc; }

#comments { padding-top: 24px; border-top: 1px solid var(--choco-rule); }
.comments-title, .comment-reply-title { color: #38271d; font: normal 22px/1.3 "Trebuchet MS", Arial, sans-serif; }
.comment-list { list-style: none; padding: 0; margin: 18px 0; }
.comment-list .children { list-style: none; margin-left: 25px; }
.comment-body { margin: 0 0 18px; padding: 15px; border: 1px solid #e1d6c8; background: #fffdf9; border-radius: 3px; }
.comment-author { font-weight: bold; }
.comment-metadata { font-size: 11px; color: var(--choco-muted); }
.comment-content p { margin: 12px 0; }
.comment-form label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: bold; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; max-width: 100%; padding: 10px; border: 1px solid #d5c7b5; border-radius: 3px; background: #fffdf9; }
.form-submit input[type="submit"] { border: 1px solid #633b25; border-radius: 3px; padding: 10px 15px; background: #5a3826; color: #fff2df; font-weight: bold; }

#footer { padding: 22px 12px 32px; text-align: center; color: #947b62; font-size: 11px; }
#footer p { margin: 4px 0; }
#footer a { color: #c29a62; }
.footer-rss { display: inline-block; margin-top: 7px; padding-left: 20px; background: radial-gradient(circle at 5px 50%, #a47743 0 3px, transparent 3.5px); }

/* Content/editor compatibility */
.wp-block-image img, .wp-block-cover, .wp-block-gallery, .wp-block-table { max-width: 100%; }
.wp-block-quote { border-left: 4px solid #b58a5c; padding-left: 18px; color: #6b5748; }
.wp-block-button__link { background: #5a3826; color: #fff2df; border-radius: 3px; }
hr { border: 0; border-top: 1px solid var(--choco-rule); margin: 25px 0; }

@media (max-width: 980px) {
  #page { width: min(calc(100% - 24px), var(--choco-width)); }
  #headerwrapper { padding: 24px 8px; gap: 18px; }
  .content-layout { grid-template-columns: minmax(0, 1fr) 225px; gap: 25px; padding-left: 72px; padding-right: 20px; }
  #sidebar { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 760px) {
  #page { width: calc(100% - 20px); }
  #headerwrapper { min-height: 0; align-items: flex-start; flex-direction: column; padding: 22px 5px 20px; gap: 17px; }
  #logo { width: 100%; flex: none; }
  #nav { width: 100%; display: block; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; }
  .menu-toggle:before { content: "☰"; font-size: 15px; }
  #primary-menu, .nav-menu { display: none; width: 100%; margin-top: 9px; padding: 7px; align-items: stretch; flex-direction: column; background: #2e1f17; border: 1px solid #6c4a34; border-radius: 4px; }
  #primary-menu.is-open, .nav-menu.is-open { display: flex; }
  #primary-menu li, .nav-menu li { width: 100%; }
  #primary-menu a, .nav-menu a { padding: 10px 12px; white-space: normal; }
  .sub-menu { display: block; padding-left: 15px; }
  .content-layout { display: flex; flex-direction: column; gap: 24px; padding: 26px 20px 25px; }
  .content-area { padding: 0; }
  #sidebar { margin: 0; padding: 20px 18px 26px; border: 1px dashed #88694f; border-radius: 3px; }
  #sidebar:before, #sidebar:after { left: 7px; right: 7px; }
  .post-date { position: static; width: auto; min-height: 0; margin: 0 0 12px; padding: 5px 9px; display: inline-flex; flex-direction: row; gap: 5px; border-radius: 3px; }
  .post-date .day { font-size: 15px; }
  .post-date .month, .post-date .year { margin: 0; font-size: 10px; }
  .post h2, .post h1, .page-entry h1, .archive-title, .search-title { font-size: clamp(23px, 6vw, 29px); }
  .post-meta .comments-link { float: none; display: block; margin: 0 0 3px; }
  #footer { padding-top: 18px; }
}
@media (max-width: 430px) {
  body { font-size: 14px; }
  #page { width: calc(100% - 12px); }
  .content-layout { padding: 21px 14px 20px; }
  .post { padding-bottom: 22px; margin-bottom: 22px; }
  .post .entry, .page-entry .entry { font-size: 14px; }
  .alignleft, .alignright { float: none; display: block; margin: 1em auto; }
  .comment-list .children { margin-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}