/*
Theme Name: Turbolux Blog
Theme URI: https://www.turboluxpaints.com/blog/
Author: Turbolux Paints
Description: The Turbolux Paints blog, built on the main site's design system. Loads turboluxpaints.com's compiled stylesheet and nav so /blog/ and the rest of the site are one design with one source of truth. Classic theme, no page builder.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 7.1
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: turbolux-blog
Tags: blog, custom-colors, custom-logo, featured-images, translation-ready
*/

/* ===========================================================================
   Blog-only additions.
   Everything structural — colours, type scale, .post, .phero, .article, .btn —
   comes from turboluxpaints.com/assets/css/styles.css, which loads first.
   This file only covers what WordPress emits and the main site never needed.
   =========================================================================== */

/* --- page hero ----------------------------------------------------------
   styles.css carries two .phero rules; the later one repaints it cream for
   the product pages, which leaves white hero text unreadable everywhere else.
   This selector is more specific, so the blog's heroes stay navy as intended. */
.phero.tlx-page-hero{background:var(--navy);color:var(--on-navy)}
.phero.tlx-page-hero h1,
.phero.tlx-page-hero .display{color:var(--on-navy)}
.phero.tlx-page-hero p{color:var(--on-navy-2)}
.phero.tlx-page-hero .crumb{color:var(--on-navy-2)}
.phero.tlx-page-hero .crumb a{color:var(--on-navy-2);text-decoration:none}
.phero.tlx-page-hero .crumb a:hover{color:#fff}

/* posts that bring their own article shell sit on white, not the mist band */
.tlx-article{margin-inline:auto}

/* --- accessibility helper the main site doesn't define ------------------- */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}

/* --- featured image above the article ----------------------------------- */
.tlx-hero-fig{
  margin:0 auto;max-width:960px;overflow:hidden;
  clip-path:polygon(var(--wedge) 0,100% 0,100% 100%,0 100%,0 var(--wedge));
  box-shadow:var(--shadow-md);
}
.tlx-hero-fig img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}

/* --- WordPress post content --------------------------------------------
   .article already sets the measure and paragraph rhythm. These rules cover
   the elements the editor produces that the main site's articles never had. */
.tlx-prose > *:first-child{margin-top:0}

.tlx-prose h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.18;letter-spacing:-.025em;
  color:var(--navy);margin-top:2.8rem;margin-bottom:.2rem;
}
.tlx-prose h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.18rem,1.9vw,1.4rem);line-height:1.25;letter-spacing:-.015em;
  color:var(--navy);margin-top:2rem;margin-bottom:.2rem;
}
.tlx-prose h4{
  font-family:var(--font-display);font-weight:600;font-size:1.08rem;
  color:var(--navy);margin-top:1.6rem;margin-bottom:.2rem;
}
/* a gold tick under every h2, matching the section rules on the main site */
.tlx-prose h2::after{
  content:"";display:block;width:44px;height:4px;background:var(--gold);margin-top:.7rem
}

.tlx-prose a{
  color:var(--navy);text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--dur-base) var(--ease-hover);
}
.tlx-prose a:hover{background-size:100% 100%}

.tlx-prose ul,.tlx-prose ol{margin-top:1.3rem;padding-left:1.3rem}
.tlx-prose li{margin-top:.55rem;font-size:1.08rem;line-height:1.7}
.tlx-prose ul{list-style:none;padding-left:0}
.tlx-prose ul > li{position:relative;padding-left:1.5rem}
.tlx-prose ul > li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--gold);
  clip-path:polygon(0 0,100% 0,100% 100%)
}
.tlx-prose ol{list-style:decimal}
.tlx-prose ol > li::marker{font-family:var(--font-display);font-weight:700;color:var(--gold)}

.tlx-prose blockquote{
  margin:2.2rem 0;padding:1.3rem 1.6rem;border-left:4px solid var(--gold);
  background:var(--mist);font-size:1.1rem;line-height:1.65;color:var(--navy)
}
.tlx-prose blockquote p{margin-top:0;font-size:inherit}
.tlx-prose blockquote p + p{margin-top:.9rem}
.tlx-prose blockquote cite{display:block;margin-top:.8rem;font-size:.92rem;color:var(--text-2);font-style:normal}

.tlx-prose figure{margin:2.2rem 0}
.tlx-prose img{max-width:100%;height:auto;display:block}
.tlx-prose figure img{
  clip-path:polygon(var(--wedge) 0,100% 0,100% 100%,0 100%,0 var(--wedge))
}
.tlx-prose figcaption{
  margin-top:.7rem;font-size:.9rem;color:var(--text-2);line-height:1.5;text-align:left
}

.tlx-prose hr{border:0;height:1px;background:var(--line);margin:2.8rem 0}

.tlx-prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--mist);padding:.15em .4em;border:1px solid var(--mist-200)
}
.tlx-prose pre{
  margin:2rem 0;padding:1.1rem 1.3rem;background:var(--ink);color:#EDEBFA;
  overflow-x:auto;font-size:.92rem;line-height:1.6
}
.tlx-prose pre code{background:none;border:0;padding:0;color:inherit}

/* tables scroll rather than break the measure */
.tlx-prose .tlx-table-scroll,.tlx-prose figure.wp-block-table{overflow-x:auto}
.tlx-prose table{border-collapse:collapse;width:100%;margin:2rem 0;font-size:.98rem}
.tlx-prose th,.tlx-prose td{border:1px solid var(--line);padding:.7em .9em;text-align:left;vertical-align:top}
.tlx-prose th{
  background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:600;
  font-size:.88rem;letter-spacing:.02em
}
.tlx-prose tbody tr:nth-child(even){background:var(--mist)}

/* editor alignment classes */
.tlx-prose .aligncenter{margin-left:auto;margin-right:auto;text-align:center}
.tlx-prose .alignleft{float:left;margin:.4rem 1.6rem 1.2rem 0;max-width:50%}
.tlx-prose .alignright{float:right;margin:.4rem 0 1.2rem 1.6rem;max-width:50%}
.tlx-prose .alignwide,.tlx-prose .alignfull{
  width:auto;max-width:min(960px,92vw);margin-left:50%;transform:translateX(-50%)
}
.tlx-prose .wp-caption{max-width:100%}
.tlx-prose .wp-block-embed,.tlx-prose iframe{max-width:100%}
.tlx-prose .wp-block-embed__wrapper{position:relative}

@media (max-width:640px){
  .tlx-prose .alignleft,.tlx-prose .alignright{float:none;margin:1.6rem 0;max-width:100%}
  .tlx-prose .alignwide,.tlx-prose .alignfull{margin-left:0;transform:none;max-width:100%}
}

/* --- pagination ---------------------------------------------------------- */
.tlx-pager{margin-top:3.2rem}
.tlx-pager ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tlx-pager li{margin:0}
.tlx-pager a,.tlx-pager span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 .9em;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  border:1px solid var(--line);color:var(--navy);text-decoration:none;
  transition:background var(--dur-base) var(--ease-hover),
             border-color var(--dur-base) var(--ease-hover),
             color var(--dur-base) var(--ease-hover);
}
.tlx-pager a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.tlx-pager .current{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.tlx-pager .dots{border-color:transparent}
.tlx-pagenote{
  font-family:var(--font-display);font-weight:600;font-size:.85rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:1.4rem
}

/* --- search form --------------------------------------------------------- */
.tlx-search{display:flex;gap:10px;flex-wrap:wrap;max-width:560px}
.tlx-search input[type=search]{
  flex:1 1 240px;min-width:0;height:52px;padding:0 1rem;
  border:1px solid var(--line);background:#fff;color:var(--text);
  font-family:var(--font-body);font-size:1rem
}
.tlx-search input[type=search]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* --- focus visibility (WP links inside the shared design) ---------------- */
.tlx-prose a:focus-visible,.tlx-pager a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* --- post cards: the image is an <img>, not a background ----------------- */
.post__img img{display:block}

/* --- comments (off by default, styled in case they're switched on) ------- */
.tlx-prose .comment-respond{margin-top:3rem}