/*
Theme Name: Plusline
Theme URI: https://theplus.so
Author: Uğur KILCI
Author URI: https://ugurkilci.com
Description: Blog theme for thePlus.so. Uses the exact same self-hosted Tailwind build and Font Awesome as the main site, so theplus.so and theplus.so/blog read as one product. This file only carries what Tailwind can't reach: the site's custom effects and styling for WordPress-generated markup.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plusline
Tags: blog, one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ══════════════════════════════════════════════════════════════
   1. Birebir thePlus.so — main site's inline <style> block
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { background: #fafafa; color: #0a0a0a; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.outline { -webkit-text-stroke: 3px #0a0a0a; color: transparent; }
@media (max-width: 640px) { .outline { -webkit-text-stroke: 2px #0a0a0a; } }
.outline-light { -webkit-text-stroke: 1.5px #0a0a0a; color: transparent; }
@media (max-width: 640px) { .outline-light { -webkit-text-stroke: 1px #0a0a0a; } }
::selection { background: #0a0a0a; color: #fff; }
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-thumb { background: #0a0a0a; border-radius: 50px; }

/* card invert hover — same signature as the widget cards on the homepage */
.w-card { transition: background .2s ease; }
.w-card:hover { background: #0a0a0a; }
.w-card:hover .w-title { color: #fff; }
.w-card:hover .w-desc  { color: #737373; }
.w-card:hover .w-pill  { background: #1a1a1a; border-color: #333; color: #a3a3a3; }
.w-card:hover .w-icon  { color: #fff; }
.w-card:hover .w-link  { color: #525252; }
.w-pill { transition: all .2s; }
@media (max-width: 767px) {
  .w-card:hover { background: #fff; }
  .w-card:hover .w-title { color: #0a0a0a; }
  .w-card:hover .w-desc  { color: #525252; }
  .w-card:hover .w-pill  { background: #fafafa; border-color: #e5e5e5; color: #525252; }
  .w-card:hover .w-icon  { color: #0a0a0a; }
  .w-card:hover .w-link  { color: #737373; }
}

/* micro-interactions */
@keyframes fadeInUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.reveal { opacity:0; transform:translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.price-hover { transition: transform .2s ease, box-shadow .2s ease; }
.price-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.08); }
.step-icon { display:inline-block; transition: transform .2s ease, color .2s; }
.step-row:hover .step-icon { transform: scale(1.2); }
@keyframes tickerFade { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.ticker-item { animation: tickerFade .4s ease both; }
.ticker-item:nth-child(1) { animation-delay:.1s; }
.ticker-item:nth-child(2) { animation-delay:.22s; }
.ticker-item:nth-child(3) { animation-delay:.34s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
}

/* ══════════════════════════════════════════════════════════════
   2. WordPress-only — markup Tailwind classes can't be put on
   ══════════════════════════════════════════════════════════════ */

/* ── the_content() output ── */
.entry { font-size:19px; line-height:1.75; color:#262626; }
@media (max-width:767px) { .entry { font-size:17.5px; } }
.entry > * { margin:0 0 1.25em; }
.entry > *:last-child { margin-bottom:0; }
.entry h2 { font-size:clamp(28px,3.8vw,42px); font-weight:900; letter-spacing:-.035em; line-height:1.06; color:#0a0a0a; margin:1.9em 0 .5em; }
.entry h3 { font-size:clamp(22px,2.8vw,29px); font-weight:900; letter-spacing:-.03em; line-height:1.15; color:#0a0a0a; margin:1.6em 0 .45em; }
.entry h4 { font-size:20px; font-weight:800; letter-spacing:-.02em; color:#0a0a0a; margin:1.5em 0 .4em; }
.entry a { color:#0a0a0a; text-decoration:underline; text-decoration-color:#d4d4d4; text-underline-offset:3px; transition:text-decoration-color .2s; }
.entry a:hover { text-decoration-color:#0a0a0a; }
.entry strong { font-weight:800; color:#0a0a0a; }
.entry ul, .entry ol { padding-left:1.35em; }
.entry li { margin-bottom:.5em; }
.entry ul li::marker { color:#a3a3a3; }
.entry img, .entry video { border-radius:8px; max-width:100%; height:auto; display:block; }
.entry iframe { width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:8px; }
.entry blockquote { margin:1.8em 0; padding:2px 0 2px 24px; border-left:3px solid #0a0a0a; font-size:23px; font-weight:600; letter-spacing:-.02em; line-height:1.5; color:#0a0a0a; }
.entry blockquote p:last-child { margin-bottom:0; }
.entry code { background:#f5f5f5; border:1px solid #e5e5e5; padding:2px 6px; border-radius:5px; font-size:.87em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.entry pre { background:#0a0a0a; color:#f5f5f5; padding:22px; border-radius:8px; overflow:auto; font-size:15px; line-height:1.6; }
.entry pre code { background:none; border:0; color:inherit; padding:0; }
.entry table { width:100%; border-collapse:collapse; font-size:16px; display:block; overflow-x:auto; }
.entry th, .entry td { border:1px solid #e5e5e5; padding:11px 14px; text-align:left; }
.entry th { background:#fafafa; font-weight:800; }
.entry hr { border:none; height:1px; background:#e5e5e5; margin:2.4em 0; }
.entry figcaption, .entry .wp-caption-text { font-size:13px; color:#a3a3a3; text-align:center; margin-top:8px; }
.entry .alignleft  { float:left;  margin:0 24px 18px 0; }
.entry .alignright { float:right; margin:0 0 18px 24px; }
.entry .aligncenter{ margin-left:auto; margin-right:auto; }
.entry .alignwide, .entry .alignfull { max-width:none; }
.entry .wp-block-image { margin-bottom:1.5em; }
.entry .wp-block-button__link { display:inline-block; background:#0a0a0a; color:#fff; padding:12px 24px; border-radius:8px; font-weight:700; font-size:14px; text-decoration:none; }

/* ── pagination (the_posts_pagination / wp_link_pages) ── */
.pagination, .comments-pagination { display:flex; justify-content:center; margin:56px 0 0; }
.pagination .nav-links, .comments-pagination .nav-links { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.page-numbers {
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 14px;
  border:1px solid #e5e5e5; background:#fff; border-radius:8px; text-decoration:none;
  font-size:14px; font-weight:700; color:#525252;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.page-numbers:hover { background:#0a0a0a; border-color:#0a0a0a; color:#fff; transform:translateY(-1px); }
.page-numbers.current { background:#0a0a0a; border-color:#0a0a0a; color:#fff; }
.page-numbers.dots { border-color:transparent; background:none; }
.page-numbers.dots:hover { background:none; color:#525252; transform:none; }
.pagination .screen-reader-text { display:none; }

/* ── comments ── */
.commentlist { list-style:none; padding:0; margin:0; }
.commentlist li.comment { background:#fff; border:1px solid #e5e5e5; border-radius:8px; padding:20px; margin-bottom:14px; }
.commentlist .children { list-style:none; padding-left:22px; margin:14px 0 0; }
.comment-meta { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:13px; color:#737373; }
.comment-meta img { border-radius:9999px; width:32px; height:32px; }
.comment-author { font-weight:800; color:#0a0a0a; }
.comment-body { font-size:16px; line-height:1.7; color:#404040; }
.comment-body p:last-child { margin-bottom:0; }
.bypostauthor > .comment-meta .comment-author::after {
  content:'author'; margin-left:7px; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  background:#0a0a0a; color:#fff; padding:2px 7px; border-radius:9999px; vertical-align:middle;
}
.comment-reply-title { font-size:24px; font-weight:900; letter-spacing:-.03em; margin:40px 0 18px; }
.comment-form label { display:block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#737373; margin-bottom:7px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea {
  width:100%; padding:12px 15px; border:1px solid #e5e5e5; border-radius:8px; background:#fff; font:inherit; font-size:15px; color:#0a0a0a;
}
.comment-form input:focus, .comment-form textarea:focus { outline:none; border-color:#0a0a0a; box-shadow:0 0 0 3px rgba(10,10,10,.06); }
.comment-form p { margin:0 0 14px; }
.comment-form .submit {
  background:#0a0a0a; color:#fff; border:0; border-radius:8px; padding:13px 26px;
  font-weight:700; font-size:14px; cursor:pointer; transition:background .2s, transform .2s;
}
.comment-form .submit:hover { background:#262626; transform:translateY(-1px); }
.comment-form .comment-form-cookies-consent { display:flex; align-items:center; gap:8px; }
.comment-form .comment-form-cookies-consent label { text-transform:none; letter-spacing:0; font-size:13px; font-weight:400; margin:0; }
.comment-form .comment-form-cookies-consent input { width:auto; }

/* ── search form (get_search_form) ── */
.searchform { display:flex; gap:10px; width:100%; }
.searchform input[type=search] {
  flex:1; min-width:0; padding:13px 17px; border:1px solid #e5e5e5; border-radius:8px;
  background:#fff; font:inherit; font-size:15px; color:#0a0a0a; transition:border-color .2s, box-shadow .2s;
}
.searchform input[type=search]:focus { outline:none; border-color:#0a0a0a; box-shadow:0 0 0 3px rgba(10,10,10,.06); }
.searchform input[type=search]::placeholder { color:#a3a3a3; }

/* ── a11y / admin bar ── */
.screen-reader-text {
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.skip-link { position:absolute; left:-9999px; top:0; z-index:9999; background:#0a0a0a; color:#fff; padding:12px 18px; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }
body.admin-bar .site-header { top:32px; }
@media screen and (max-width:782px) { body.admin-bar .site-header { top:46px; } }

/* ══════════════════════════════════════════════════════════════
   3. Playful hero — we sell "your workspace shouldn't be boring",
      so the headline refuses to sit still.
   ══════════════════════════════════════════════════════════════ */

/* cursor spotlight */
#hero-spot {
  position:absolute; top:0; left:0; width:620px; height:620px; border-radius:9999px;
  pointer-events:none; z-index:0; opacity:0; filter:blur(30px);
  transform:translate(-50%,-50%); transition:opacity .5s ease;
  background:radial-gradient(closest-side, rgba(34,197,94,.20), rgba(56,189,248,.14) 55%, transparent);
}
#hero.live #hero-spot { opacity:1; }

/* the outlined word fills itself in under the pointer */
.hero-word { line-height:inherit; }
.hero-word-fill {
  position:absolute; left:0; top:0; white-space:nowrap; pointer-events:none;
  color:#0a0a0a; -webkit-text-stroke:0;
  clip-path:circle(var(--wr, 0px) at var(--wx, 50%) var(--wy, 50%));
  transition:clip-path .14s linear;
}

/* floating mini-widgets — kept inside the same 72rem column as the text.
   Hidden below 1024px here rather than with a Tailwind class, so they can
   never appear as loose stacked text if the CSS or JIT is late. */
.hero-floats { display:none; }
@media (min-width:1024px) {
  .hero-floats {
    display:block;
    position:absolute; top:0; bottom:0; left:0; right:0;
    max-width:72rem; margin:0 auto; z-index:1; pointer-events:none;
  }
  #hero.hero-playful { min-height:600px; }
}
.hero-float {
  position:absolute; will-change:transform;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
/* bob on the inner card so it never fights the parallax transform outside */
.hero-float .hero-widget { animation:heroBob 6s ease-in-out infinite; }
.hero-float:nth-child(2) .hero-widget { animation-delay:-2s; }
.hero-float:nth-child(3) .hero-widget { animation-delay:-4s; }
@keyframes heroBob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
.hero-widget {
  background:#fff; border:1px solid #e5e5e5; border-radius:12px; padding:16px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,.07); min-width:170px;
}
.hero-widget-label {
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#a3a3a3; margin-bottom:9px;
}
.hero-marquee { display:flex; width:max-content; }
.hero-marquee span {
  font-size:15px; font-weight:800; letter-spacing:-.01em; white-space:nowrap;
  animation:heroScroll 9s linear infinite;
}
@keyframes heroScroll { from { transform:translateX(0) } to { transform:translateX(-100%) } }

/* buttons lean toward the cursor */
.magnetic { will-change:transform; }

@media (prefers-reduced-motion: reduce) {
  .hero-float { animation:none; transition:none; }
  .hero-marquee span { animation:none; }
  .hero-word-fill { display:none; }
  #hero-spot { display:none; }
}

/* ══════════════════════════════════════════════════════════════
   4. Footer widget column
   ══════════════════════════════════════════════════════════════ */
.footer-widgets .widget-title,
.footer-widgets h2, .footer-widgets h3 {
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#a3a3a3; margin:0 0 20px;
}
.footer-widgets ul { list-style:none; margin:0; padding:0; }
.footer-widgets li { margin-bottom:12px; font-size:14px; }
.footer-widgets a { color:#525252; text-decoration:none; transition:color .2s; }
.footer-widgets a:hover { color:#0a0a0a; }
.footer-widgets .searchform { flex-direction:column; gap:8px; }
.footer-widgets .searchform input[type=search] { width:100%; padding:11px 14px; font-size:14px; }
.footer-widgets .searchform button { width:100%; }
.footer-widgets select { width:100%; padding:10px 12px; border:1px solid #e5e5e5; border-radius:8px; background:#fff; font:inherit; font-size:14px; }
.footer-menu a { color:inherit; text-decoration:none; transition:color .2s; }
.footer-menu a:hover { color:#0a0a0a; }

/* ── nav (wp_nav_menu writes its own markup, so it's styled here) ── */
#site-nav a { text-decoration:none; font-size:14px; font-weight:600; color:#404040; transition:color .2s; }
#site-nav a:hover,
#site-nav .current-menu-item > a,
#site-nav .current_page_item > a { color:#0a0a0a; }
@media (max-width:767px) {
  body.nav-open #site-nav { display:block; }
  #site-nav li { border-bottom:1px solid #f0f0f0; }
  #site-nav li:last-child { border-bottom:0; }
  #site-nav a { display:block; padding:14px 0; font-size:15px; }
}

/* ── minimal pre-Tailwind paint, so the header doesn't flash unstyled ── */
.site-header { position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(250,250,250,.85); border-bottom:1px solid #e5e5e5; }