/*
Theme Name: The Stripe Blog
Theme URI: https://stripesocial.blog/
Author: The Stripe Blog Team
Author URI: https://stripesocial.blog/
Description: A clean, fast, professional WordPress theme built for TheStripeBlog — a technology news, reviews and how-to publication at stripesocial.blog. Includes custom homepage, category-ready layout, widgetized sidebar and footer, and a modern responsive design.
Version: 1.0.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: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thestripeblog
Tags: blog, news, technology, custom-menu, custom-logo, featured-images, footer-widgets, threaded-comments, translation-ready

The Stripe Blog is distributed under the terms of the GNU GPL v2 or later.
*/

/* -----------------------------------------------------------
   0. Custom properties / theme tokens
----------------------------------------------------------- */
:root{
  --tsb-ink: #10131a;
  --tsb-ink-soft: #4a4f5c;
  --tsb-bg: #ffffff;
  --tsb-bg-alt: #f4f6fb;
  --tsb-line: #e4e7ee;
  --tsb-accent: #3454ff;
  --tsb-accent-dark: #1f36c7;
  --tsb-accent-soft: #eaefff;
  --tsb-warn: #ff6b3d;
  --tsb-max: 1180px;
  --tsb-radius: 14px;
  --tsb-font-head: "Sora", "Segoe UI", system-ui, sans-serif;
  --tsb-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* -----------------------------------------------------------
   1. Reset & base
----------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--tsb-font-body);
  color: var(--tsb-ink);
  background: var(--tsb-bg);
  font-size: 17px;
  line-height: 1.7;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--tsb-accent); text-decoration:none; }
a:hover{ color: var(--tsb-accent-dark); text-decoration:underline; }
h1,h2,h3,h4,h5,h6{
  font-family: var(--tsb-font-head);
  line-height:1.25;
  margin: 0 0 .5em;
  color: var(--tsb-ink);
  font-weight:700;
}
p{ margin:0 0 1.2em; }
ul,ol{ padding-left:1.3em; }
.container{ max-width: var(--tsb-max); margin:0 auto; padding:0 24px; }
.screen-reader-text{
  position:absolute !important; width:1px;height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}
button, input, textarea, select{ font-family:inherit; font-size:1rem; }

/* -----------------------------------------------------------
   2. Header
----------------------------------------------------------- */
.site-header{
  border-bottom:1px solid var(--tsb-line);
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
}
.site-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
  gap: 20px;
}
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-title{ margin:0; font-size:1.5rem; letter-spacing:-.02em; }
.site-title a{ color: var(--tsb-ink); text-decoration:none; }
.site-title a span{ color: var(--tsb-accent); }
.site-description{ margin:0; font-size:.85rem; color:var(--tsb-ink-soft); }
.custom-logo{ max-height:44px; width:auto; }

.main-navigation{ display:flex; align-items:center; }
.main-navigation ul{
  list-style:none; margin:0; padding:0; display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.main-navigation li{ position:relative; }
.main-navigation a{
  color: var(--tsb-ink); font-weight:600; font-size:.96rem;
  padding:10px 14px; border-radius:999px; display:inline-block;
  text-decoration:none; transition:.15s;
}
.main-navigation a:hover, .main-navigation .current-menu-item > a{
  background: var(--tsb-accent-soft); color: var(--tsb-accent-dark);
}
.main-navigation ul ul{
  display:none; position:absolute; top:100%; left:0; background:#fff;
  border:1px solid var(--tsb-line); border-radius:12px; padding:8px; min-width:200px;
  box-shadow:0 12px 28px rgba(16,19,26,.1); flex-direction:column;
}
.main-navigation li:hover > ul{ display:flex; }
.menu-toggle{
  display:none; background:var(--tsb-ink); color:#fff; border:0; border-radius:10px;
  padding:10px 14px; font-weight:600; cursor:pointer;
}
.header-cta{
  background: var(--tsb-accent); color:#fff !important; padding:10px 18px !important;
  border-radius:999px !important; font-weight:700 !important;
}
.header-cta:hover{ background: var(--tsb-accent-dark) !important; }

/* -----------------------------------------------------------
   3. Hero (front page)
----------------------------------------------------------- */
.tsb-hero{
  background: linear-gradient(160deg, var(--tsb-bg-alt) 0%, #fff 65%);
  padding: 64px 0 56px;
  border-bottom:1px solid var(--tsb-line);
}
.tsb-hero-inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap:48px; align-items:center; }
.tsb-eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.12em; font-size:.75rem;
  font-weight:700; color: var(--tsb-accent-dark); background:var(--tsb-accent-soft);
  padding:6px 12px; border-radius:999px; margin-bottom:16px;
}
.tsb-hero h1{ font-size: clamp(2rem, 4vw, 3rem); margin-bottom:.4em; }
.tsb-hero .lede{ font-size:1.15rem; color:var(--tsb-ink-soft); max-width:52ch; }
.tsb-hero-actions{ display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:13px 22px; border-radius:999px; font-weight:700;
  text-decoration:none; transition:.15s; border:2px solid transparent;
}
.btn-primary{ background: var(--tsb-accent); color:#fff; }
.btn-primary:hover{ background:var(--tsb-accent-dark); color:#fff; text-decoration:none; }
.btn-outline{ border-color: var(--tsb-ink); color:var(--tsb-ink); }
.btn-outline:hover{ background:var(--tsb-ink); color:#fff; text-decoration:none; }
.tsb-hero-art{
  background: var(--tsb-ink); border-radius: 20px; aspect-ratio: 4/3;
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:var(--tsb-font-head); font-size:1.1rem; text-align:center; padding:24px;
  background-image: radial-gradient(circle at 30% 20%, #3454ff 0%, transparent 45%), radial-gradient(circle at 80% 80%, #ff6b3d 0%, transparent 40%), #10131a;
}

/* -----------------------------------------------------------
   4. Category chips / section headers
----------------------------------------------------------- */
.tsb-cats{ display:flex; flex-wrap:wrap; gap:10px; padding: 30px 0; }
.tsb-cats a{
  border:1px solid var(--tsb-line); padding:8px 16px; border-radius:999px;
  font-size:.9rem; font-weight:600; color:var(--tsb-ink);
}
.tsb-cats a:hover{ border-color: var(--tsb-accent); color:var(--tsb-accent-dark); text-decoration:none; background:var(--tsb-accent-soft); }

.tsb-section-head{ display:flex; align-items:baseline; justify-content:space-between; margin: 48px 0 20px; }
.tsb-section-head h2{ font-size:1.6rem; margin:0; }
.tsb-section-head a{ font-weight:600; font-size:.92rem; }

/* -----------------------------------------------------------
   5. Content layout
----------------------------------------------------------- */
.site-main{ padding: 10px 0 60px; }
.content-layout{ display:grid; grid-template-columns: 2.1fr .9fr; gap:48px; align-items:start; }

.post-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; }
.post-card{
  border:1px solid var(--tsb-line); border-radius: var(--tsb-radius); overflow:hidden;
  background:#fff; transition:.18s; display:flex; flex-direction:column;
}
.post-card:hover{ box-shadow: 0 16px 32px rgba(16,19,26,.08); transform: translateY(-3px); }
.post-card .thumb{
  aspect-ratio:16/10; background:var(--tsb-bg-alt); overflow:hidden;
}
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card .body{ padding:18px 20px 22px; flex:1; display:flex; flex-direction:column; }
.post-cat{
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color: var(--tsb-accent-dark); margin-bottom:8px;
}
.post-card h3{ font-size:1.12rem; margin-bottom:8px; }
.post-card h3 a{ color:var(--tsb-ink); text-decoration:none; }
.post-card h3 a:hover{ color: var(--tsb-accent); }
.post-excerpt{ color:var(--tsb-ink-soft); font-size:.94rem; margin-bottom:0; }
.post-meta{
  font-size:.8rem; color:var(--tsb-ink-soft); margin-top:auto; padding-top:14px;
  display:flex; gap:10px; align-items:center;
}

.post-list-row{
  display:grid; grid-template-columns: 220px 1fr; gap:22px; padding:26px 0;
  border-bottom:1px solid var(--tsb-line);
}
.post-list-row .thumb{ border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:var(--tsb-bg-alt); }
.post-list-row .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-list-row h2{ font-size:1.3rem; margin-bottom:8px; }
.post-list-row h2 a{ color: var(--tsb-ink); }

.pagination{ display:flex; gap:8px; justify-content:center; margin:40px 0 0; }
.pagination a, .pagination span{
  border:1px solid var(--tsb-line); padding:8px 14px; border-radius:8px; font-weight:600; font-size:.9rem;
}
.pagination .current{ background:var(--tsb-ink); color:#fff; border-color:var(--tsb-ink); }

/* -----------------------------------------------------------
   6. Single post / page
----------------------------------------------------------- */
.entry-header{ padding: 40px 0 20px; border-bottom:1px solid var(--tsb-line); margin-bottom:34px; }
.entry-header .post-cat{ margin-bottom:12px; }
.entry-title{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.entry-meta{ color:var(--tsb-ink-soft); font-size:.92rem; display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; }
.entry-thumb{ margin: 0 0 34px; border-radius: var(--tsb-radius); overflow:hidden; }
.entry-content{ font-size:1.08rem; }
.entry-content h2{ font-size:1.5rem; margin-top:1.6em; }
.entry-content h3{ font-size:1.22rem; margin-top:1.4em; }
.entry-content blockquote{
  border-left:4px solid var(--tsb-accent); margin:1.6em 0; padding:.4em 1.2em;
  background:var(--tsb-bg-alt); border-radius:0 10px 10px 0; font-style:italic; color:var(--tsb-ink-soft);
}
.entry-content pre{
  background:var(--tsb-ink); color:#e9ecff; padding:18px; border-radius:10px; overflow:auto; font-size:.9rem;
}
.entry-content code{ background:var(--tsb-accent-soft); padding:.15em .4em; border-radius:5px; font-size:.9em; }
.entry-content img{ border-radius:12px; }
.entry-tags{ margin-top:38px; padding-top:20px; border-top:1px solid var(--tsb-line); }
.entry-tags a{
  display:inline-block; margin:0 8px 8px 0; padding:6px 12px; border:1px solid var(--tsb-line);
  border-radius:999px; font-size:.82rem; color:var(--tsb-ink-soft);
}

.author-box{
  display:flex; gap:18px; background:var(--tsb-bg-alt); padding:24px; border-radius: var(--tsb-radius);
  margin:40px 0; align-items:flex-start;
}
.author-box img{ border-radius:50%; width:64px; height:64px; }
.author-box h4{ margin-bottom:4px; }

.post-nav{ display:flex; justify-content:space-between; gap:20px; margin:40px 0; padding-top:24px; border-top:1px solid var(--tsb-line); }
.post-nav a{ font-weight:600; }
.post-nav .nav-subtitle{ display:block; font-size:.75rem; text-transform:uppercase; color:var(--tsb-ink-soft); font-weight:700; letter-spacing:.05em; }

/* Static page */
.page .entry-content{ max-width: 780px; }
.page-hero{ background:var(--tsb-bg-alt); padding:50px 0; border-bottom:1px solid var(--tsb-line); margin-bottom:10px; }
.page-hero h1{ margin-bottom:8px; }
.page-hero p{ color:var(--tsb-ink-soft); margin:0; font-size:1.05rem; }

/* -----------------------------------------------------------
   7. Sidebar / widgets
----------------------------------------------------------- */
.widget{ margin-bottom:36px; background:#fff; border:1px solid var(--tsb-line); border-radius: var(--tsb-radius); padding:22px; }
.widget-title{ font-size:1rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; }
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{ padding:9px 0; border-bottom:1px solid var(--tsb-line); font-size:.94rem; }
.widget li:last-child{ border-bottom:0; }
.widget_search .search-form{ display:flex; gap:8px; }
.search-form input[type="search"]{
  flex:1; padding:11px 14px; border:1px solid var(--tsb-line); border-radius:8px;
}
.search-form button{
  background:var(--tsb-ink); color:#fff; border:0; padding:0 16px; border-radius:8px; cursor:pointer; font-weight:600;
}
.newsletter-widget p{ font-size:.92rem; color:var(--tsb-ink-soft); }
.newsletter-widget input[type="email"]{
  width:100%; padding:11px 14px; border:1px solid var(--tsb-line); border-radius:8px; margin-bottom:10px;
}
.newsletter-widget button{ width:100%; }

/* -----------------------------------------------------------
   8. Contact form
----------------------------------------------------------- */
.tsb-contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; margin-top:20px; }
.tsb-contact-form label{ display:block; font-weight:700; margin-bottom:6px; font-size:.92rem; }
.tsb-contact-form input, .tsb-contact-form textarea{
  width:100%; padding:13px 14px; border:1px solid var(--tsb-line); border-radius:10px; margin-bottom:18px;
}
.tsb-contact-form textarea{ min-height:150px; resize:vertical; }
.tsb-contact-info .info-item{ margin-bottom:22px; }
.tsb-contact-info h4{ margin-bottom:4px; font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tsb-ink-soft); }
.form-notice{ padding:14px 16px; border-radius:10px; margin-bottom:18px; font-weight:600; }
.form-notice.success{ background:#e6f7ee; color:#0a7a41; }
.form-notice.error{ background:#fdeaea; color:#c02b2b; }

/* -----------------------------------------------------------
   9. Comments
----------------------------------------------------------- */
.comments-area{ margin-top:50px; padding-top:34px; border-top:1px solid var(--tsb-line); }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list .comment{ padding:20px 0; border-bottom:1px solid var(--tsb-line); }
.comment-author{ font-weight:700; }
.comment-form input, .comment-form textarea{
  width:100%; padding:12px; border:1px solid var(--tsb-line); border-radius:8px; margin-bottom:14px;
}
.comment-form textarea{ min-height:120px; }

/* -----------------------------------------------------------
   10. Footer
----------------------------------------------------------- */
.site-footer{ background: var(--tsb-ink); color:#c9cddb; margin-top:70px; }
.footer-widgets{
  padding:56px 0 30px; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:36px;
  border-bottom:1px solid #262b3a;
}
.footer-widgets .widget{ background:transparent; border:0; padding:0; }
.footer-widgets .widget-title{ color:#fff; }
.footer-widgets a{ color:#c9cddb; }
.footer-widgets a:hover{ color:#fff; }
.footer-brand h3{ color:#fff; margin-bottom:10px; }
.footer-brand p{ color:#8b90a3; font-size:.92rem; }
.social-links{ display:flex; gap:10px; margin-top:16px; }
.social-links a{
  width:38px; height:38px; border-radius:50%; border:1px solid #333a4d; display:flex;
  align-items:center; justify-content:center; font-size:.85rem; font-weight:700;
}
.footer-bottom{ padding:20px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.85rem; color:#8b90a3; }
.footer-bottom a{ color:#8b90a3; }
.footer-bottom nav ul{ list-style:none; display:flex; gap:16px; margin:0; padding:0; }

/* -----------------------------------------------------------
   11. Misc
----------------------------------------------------------- */
.tsb-notice-bar{ background: var(--tsb-ink); color:#fff; text-align:center; padding:9px 12px; font-size:.85rem; }
.tsb-notice-bar a{ color:#fff; text-decoration:underline; }
.error-404{ text-align:center; padding:90px 0; }
.error-404 h1{ font-size:5rem; margin-bottom:0; color:var(--tsb-accent); }
table{ width:100%; border-collapse:collapse; margin:1.5em 0; }
table th, table td{ border:1px solid var(--tsb-line); padding:10px 12px; text-align:left; }
.alignwide{ margin-left:-40px; margin-right:-40px; max-width:none; }
.alignfull{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:none; width:100vw; }

/* -----------------------------------------------------------
   12. Responsive
----------------------------------------------------------- */
@media (max-width: 960px){
  .content-layout{ grid-template-columns:1fr; }
  .post-grid{ grid-template-columns: repeat(2,1fr); }
  .tsb-hero-inner{ grid-template-columns:1fr; }
  .footer-widgets{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 700px){
  .main-navigation{
    position:fixed; inset:0 0 0 auto; width:78%; height:100vh; background:#fff;
    transform:translateX(100%); transition:.25s; padding:90px 24px 24px; box-shadow:-10px 0 30px rgba(0,0,0,.1);
  }
  .main-navigation.is-open{ transform:translateX(0); }
  .main-navigation ul{ flex-direction:column; align-items:flex-start; width:100%; }
  .main-navigation ul ul{ position:static; box-shadow:none; border:0; padding-left:12px; }
  .menu-toggle{ display:inline-block; }
  .post-grid{ grid-template-columns:1fr; }
  .post-list-row{ grid-template-columns:1fr; }
  .footer-widgets{ grid-template-columns:1fr; padding:40px 0 10px; }
  .tsb-contact-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}