/*
Theme Name: TechDevBlog
Theme URI: https://votre-site.com
Author: Votre Nom
Author URI: https://votre-site.com
Description: Un thème WordPress moderne, responsive et orienté lecture pour un blog technologique, propulsé par Tailwind CSS.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
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: techdevblog
Tags: blog, two-columns, right-sidebar, custom-menu, featured-images, translation-ready
*/

/* -------------------------------------------------------------------------
   The Tailwind utility classes used by the templates are hand-compiled
   in assets/theme.css (see functions.php for its enqueue): no CDN or
   Tailwind build at runtime. This file only contains what theme.css
   doesn't cover: classes generated by WordPress core and the block
   editor.
   Any new Tailwind class added to a template needs its rule added
   manually to assets/theme.css, otherwise it has no effect.
   ---------------------------------------------------------------------- */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  padding: 0.5rem 1rem;
  background: #fff;
  color: #4338ca;
  font-weight: 600;
  border-radius: 0.5rem;
}

/* Core / block editor alignments */
.alignleft { float: left; margin: 0.5rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { max-width: 100%; }
.alignfull { max-width: 100%; }

.wp-caption { max-width: 100%; margin-bottom: 1.5rem; }
.wp-caption img { display: block; width: 100%; height: auto; border-radius: 0.5rem; }
.wp-caption-text,
.wp-element-caption,
figcaption { font-size: 0.875rem; color: #64748b; margin-top: 0.5rem; text-align: center; }

.sticky .sticky-flag { display: inline-flex; }

/* Galleries */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.gallery img { width: 100%; height: auto; border-radius: 0.5rem; }

/* Code blocks */
.wp-block-code,
pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 1.25rem;
  border-radius: 0.75rem;
  overflow-x: auto;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
:not(pre) > code { background: #eef2ff; color: #4338ca; padding: 0.1em 0.35em; border-radius: 0.25rem; font-size: 0.9em; }

/* Tables */
.wp-block-table table,
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.entry-content th,
.entry-content td { border: 1px solid #e2e8f0; padding: 0.625rem 0.875rem; text-align: left; }
.entry-content th { background: #f8fafc; font-weight: 600; }

/* Pagination generated by paginate_links() (homepage, archives) and by
   the_posts_pagination() (see techdevblog_the_posts_pagination() in
   functions.php, whose "class" is a single name: the_posts_pagination()
   passes its CSS classes to sanitize_html_class(), which only handles a
   single class and strips the spaces out of a multi-class string --
   hence the layout being defined here rather than in the "class"
   argument). the_posts_pagination() also wraps its links in an inner
   ".nav-links", absent from the HTML that paginate_links() generates by
   hand. */
.pagination,
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fff;
  color: #475569;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}
.pagination .page-numbers:hover { border-color: #6366f1; color: #4f46e5; }
.pagination .page-numbers.current { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* Comments */
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .children { list-style: none; margin: 1.5rem 0 0 1.5rem; padding-left: 1.5rem; border-left: 2px solid #e2e8f0; }
.comment-list li { margin-bottom: 1.5rem; }
.comment-body { position: relative; }
.comment-author img { border-radius: 9999px; }
.comment-reply-link,
.comment-edit-link {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #4f46e5;
  text-decoration: none;
}
.comment-reply-link:hover { text-decoration: underline; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font: inherit;
  color: #0f172a;
  background: #fff;
}
.comment-form input:focus,
.comment-form textarea:focus { outline: 2px solid #6366f1; outline-offset: 1px; border-color: transparent; }
.comment-form label { display: block; font-size: 0.875rem; font-weight: 500; color: #334155; margin-bottom: 0.375rem; }
.comment-form p { margin-bottom: 1rem; }
/* The generic ".comment-form label { display: block; }" above is meant for
   text field labels (sitting above their input), but it also catches the
   checkbox labels below (consent, comment/blog subscription), pushing
   their text onto its own line under the checkbox instead of next to it.
   Laying out each row as flex keeps the checkbox aligned with its label,
   wrapping text next to it rather than underneath. */
.comment-form .comment-form-cookies-consent,
.comment-form .comment-subscription-form {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.comment-form .comment-form-cookies-consent label,
.comment-form .comment-subscription-form label {
  display: inline;
  margin-bottom: 0;
}
.comment-form .comment-form-cookies-consent input[type="checkbox"],
.comment-form .comment-subscription-form input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.1875rem;
}
.comment-form .submit {
  background: #4f46e5;
  color: #fff;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  cursor: pointer;
}
.comment-form .submit:hover { background: #4338ca; }

/* -------------------------------------------------------------------------
   Sidebar widgets: same visual language as the theme's other blocks
   (white card, 12px corners, light border, indigo accents).
   ---------------------------------------------------------------------- */
.widget { margin: 0; }
/* Spacing between sidebar cards (aside.space-y-8): a more specific rule
   than ".widget { margin: 0; }" above, otherwise the latter wins (same
   specificity as a Tailwind ".space-y-8 > * + *", but loaded later in
   the cascade) and cancels the spacing. */
.space-y-8 > .widget + .widget { margin-top: 2rem; }
.widget-title,
.widget .wp-block-heading,
.widget h2,
.widget h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 1rem;
  line-height: 1.3;
}
/* Hands control back to text color utility classes (e.g. text-white) in
   a custom HTML block in the sidebar (e.g. the indigo-background "Don't
   miss out" card): ".widget h2/h3" and ".widget p" above have a
   specificity (class + element) stronger than a plain utility class
   (".text-white"), which would otherwise always lose. */
.widget .text-white { color: #fff; }
.widget .text-indigo-100 { color: #e0e7ff; }
.widget .text-indigo-200 { color: #c7d2fe; }
.widget ul,
.widget ol { list-style: none; margin: 0; padding: 0; }
.widget li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: #475569;
  padding: 0.375rem 0;
}
.widget li + li { border-top: 1px solid #f1f5f9; }
.widget li ul,
.widget li ol { display: none; }
.widget a { color: #475569; text-decoration: none; transition: color 0.15s ease; }
.widget a:hover { color: #4f46e5; }
.widget p { font-size: 0.875rem; line-height: 1.65; color: #475569; margin: 0 0 0.75rem; }
.widget p:last-child { margin-bottom: 0; }
/* Same specificity conflict as for the colors above: the "margin: 0 ..."
   on ".widget p" also sets the top margin to 0, which cancels out any
   mt-3/mt-4 carried by the paragraph itself (e.g. the "No spam,
   promise." text under the "Don't miss out" card's button sits flush
   against it without this rule). */
.widget .mt-3 { margin-top: 0.75rem; }
.widget .mt-4 { margin-top: 1rem; }
.widget .post-date,
.widget .rss-date,
.widget .comment-author-link { font-size: 0.75rem; color: #94a3b8; }
.widget select,
.widget input[type="text"],
.widget input[type="search"],
.widget input[type="email"] {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  background: #fff;
  color: #0f172a;
}
.widget .wp-block-search__button,
.widget input[type="submit"],
.widget button[type="submit"] {
  background: #4f46e5;
  color: #fff;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  cursor: pointer;
}
.widget .wp-block-search__button:hover,
.widget input[type="submit"]:hover,
.widget button[type="submit"]:hover { background: #4338ca; }
/* Same specificity conflict as above, for the "Don't miss out" card's
   button (solid indigo background): a white button blended in with the
   email field right above it (both full-width, white, stacked). A
   darker indigo than the card's background sets it apart from both the
   field and the card, reusing shades already present in the theme
   (indigo-700 = hover state of the header's "Subscribe" button;
   #3730a3 = hover state of several links and ::selection). Still
   targets the existing HTML block's bg-slate-900 class (a widget
   managed from Appearance > Widgets, outside this repo) rather than
   its literal color. */
.widget button[type="submit"].bg-slate-900,
.widget input[type="submit"].bg-slate-900 { background: #4338ca; color: #fff; }
.widget button[type="submit"].bg-slate-900:hover,
.widget input[type="submit"].bg-slate-900:hover { background: #3730a3; }
.widget .wp-block-search__inside-wrapper { display: flex; gap: 0.5rem; }
.widget .wp-block-latest-posts__post-title { font-weight: 500; color: #334155; }
.widget .wp-block-latest-posts__post-date { font-size: 0.75rem; color: #94a3b8; }
.widget .tagcloud { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.widget .tagcloud a {
  font-size: 0.75rem !important;
  background: #f1f5f9;
  color: #475569;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
}
.widget .tagcloud a:hover { background: #e0e7ff; color: #4338ca; }

/* -------------------------------------------------------------------------
   Reading time on post cards (grid): same composition (icon + text) as
   the hero's meta, without the pill background used for the category.
   A light gradient at the bottom of the image keeps the text legible
   regardless of the featured image.
   ---------------------------------------------------------------------- */
.card-thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4rem;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.65), transparent);
  pointer-events: none;
}
.card-reading-time {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   Table of contents: collapsible box shown at the top of posts with at
   least two H2/H3 headings (see techdevblog_prepare_content_with_toc()
   in functions.php and single.php). Implemented with <details>/<summary>
   for native collapsible behavior, no JavaScript.
   ---------------------------------------------------------------------- */
.toc {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  margin-bottom: 2.5rem;
  overflow: hidden;
}
.toc-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
}
.toc-header::-webkit-details-marker,
.toc-header::marker { display: none; }
.toc-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #e0e7ff;
  color: #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toc-title { font-weight: 700; color: #0f172a; font-size: 0.9375rem; flex-grow: 1; }
.toc-count { font-size: 0.75rem; color: #64748b; font-weight: 500; }
.toc-chevron { color: #94a3b8; transition: transform 0.2s ease; flex-shrink: 0; }
.toc:not([open]) .toc-chevron { transform: rotate(-90deg); }
.toc-body { padding: 0 1.25rem 1.125rem; }
.toc-list { list-style: none; margin: 0; padding: 0; counter-reset: toc-counter; }
.toc-list > li { counter-increment: toc-counter; margin-top: 0.625rem; }
.toc-list > li > a {
  display: flex;
  gap: 0.625rem;
  align-items: baseline;
  color: #475569;
  text-decoration: none;
  font-size: 0.90625rem;
  font-weight: 500;
  transition: color 0.15s ease;
}
.toc-list > li > a::before {
  content: counter(toc-counter);
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.375rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #4f46e5;
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.0625rem;
}
.toc-list > li > a:hover { color: #4f46e5; }
.toc-sublist { list-style: none; margin: 0.375rem 0 0 1.875rem; padding: 0; }
.toc-sublist li { margin-top: 0.375rem; }
.toc-sublist a {
  color: #64748b;
  text-decoration: none;
  font-size: 0.84375rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.15s ease;
}
.toc-sublist a::before { content: "\2013"; color: #94a3b8; }
.toc-sublist a:hover { color: #4f46e5; }
.entry-content h2,
.entry-content h3 { scroll-margin-top: 1.5rem; }

/* Custom logo: constrained to the height of the nav bar */
.site-logo,
.custom-logo {
  width: 2rem;
  height: 2rem;
  max-width: 2rem;
  max-height: 2rem;
  object-fit: cover;
  border-radius: 0.5rem;
}
.custom-logo-link { display: inline-flex; align-items: center; }

/* -------------------------------------------------------------------------
   "Back to top" button on posts (single.php): round, indigo, drop
   shadow, same visual language as the theme's other buttons. Hidden by
   default; navigation.js toggles .is-visible past a certain scroll
   distance and handles the click (smooth scroll back to the top).
   ---------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 9999px;
  background: #4f46e5;
  color: #fff;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, .1), 0 2px 4px -2px rgba(15, 23, 42, .1);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity .2s ease, transform .2s ease, background-color .15s ease;
}
.back-to-top:hover { background: #4338ca; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 640px) {
  .back-to-top { right: 2rem; bottom: 2rem; }
}

/* -------------------------------------------------------------------------
   Category archive banner (archive.php). The template (margin, padding,
   rounded corners) is identical whether or not a category image (plugin
   "Categories Images") is present, to avoid an abrupt change of shape
   and height when navigating from one category to another: only the
   styling changes (white background/dark text without an image, photo +
   dark overlay/white text with one).
   ---------------------------------------------------------------------- */
.archive-header {
  margin-bottom: 2.5rem;
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background-color: #fff;
}
@media (min-width: 768px) {
  .archive-header { padding: 3rem; }
}
.archive-header.has-image {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  background-size: cover;
  background-position: center;
}
.archive-header.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, .3), rgba(15, 23, 42, .85));
}
.archive-header.has-image > * {
  position: relative;
  z-index: 1;
}
.archive-header.has-image .text-indigo-600 { color: #c7d2fe; }
.archive-header.has-image h1,
.archive-header.has-image .text-slate-600 { color: #fff; }

/* -------------------------------------------------------------------------
   Anchor scroll offset for the Jetpack subscribe form (the header's
   "Subscribe" button links to #subscribe-blog): without this, the sticky
   nav bar (h-16, 4rem) covers the top of the form when the browser jumps
   to the anchor, hiding the email field and leaving only the button
   visible.
   ---------------------------------------------------------------------- */
#subscribe-blog {
  scroll-margin-top: 5rem;
}