/*
Theme Name: Pipely Blog
Theme URI: https://weblish.io
Author: Weblish
Author URI: https://weblish.io
Description: Pipely Blog is a modern blogging WordPress theme. A production-ready theme built from Webflow, featuring beautiful animations, responsive design, and a clean blog-focused layout.
Version: 1779191942
Requires at least: 5.8
Tested up to: 6.4
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: pipely
Tags: one-column, two-columns, custom-menu, featured-images, theme-options, translation-ready, blog

Pipely Blog WordPress Theme - Production Ready
*/

/* Note: All styles are loaded from assets/css/ directory via wp_enqueue_style() in functions.php */

:root {
  --wl-primary: #2453ff;
  --wl-primary-hover: #1b44d6;
  --wl-primary-text: #ffffff;
  --wl-primary-hover-text: #ffffff;
  --wl-secondary: #131313;
  --wl-secondary-hover: #000000;
  --wl-secondary-text: #131313;
  --wl-secondary-hover-text: #ffffff;
  --wl-accent: #ebf213;
  --wl-accent-hover: #c3ca00;
  --wl-accent-text: #131313;
  --wl-accent-hover-text: #ffffff;
  --wl-surface: #ffffff;
  --wl-background: #f7f5f1;
  --wl-text: #131313;
  --wl-muted-text: #535353;
  --wl-border: #d7d7d7;
  --wl-pill-bg: #dae8fd;
  --wl-pill-text: #131313;
  --wl-highlight-bg: #e0dbff;
  --wl-highlight-text: #131313;
  --wl-focus-ring: color-mix(in srgb, var(--wl-primary) 35%, transparent);
  --weblish-sticky-offset: 96px;
}

:root {
  --brand--yellow: var(--wl-accent);
  --brand--black: var(--wl-text);
  --brand--white: var(--wl-surface);
  --brand--gray-900: var(--wl-secondary);
  --brand--gray-800: var(--wl-secondary);
  --brand--gray-700: var(--wl-muted-text);
  --brand--gray-600: var(--wl-muted-text);
  --brand--gray-500: color-mix(in srgb, var(--wl-muted-text) 60%, var(--wl-surface));
  --brand--gray-400: color-mix(in srgb, var(--wl-muted-text) 45%, var(--wl-surface));
  --brand--gray-300: color-mix(in srgb, var(--wl-border) 75%, var(--wl-surface));
  --brand--gray-200: var(--wl-border);
  --brand--gray-100: var(--wl-background);
  --brand--blue: var(--wl-pill-bg);
  --brand--lilac: var(--wl-highlight-bg);
  --bg-color--bg-primary: var(--wl-surface);
  --bg-color--bg-secondary: var(--wl-background);
  --bg-color--bg-tertiary: var(--wl-background);
  --text-color--text-primary: var(--wl-text);
  --text-color--text-secondary: var(--wl-surface);
  --text-color--text-tertiary: var(--wl-muted-text);
  --text-color--text-quaternary: var(--wl-muted-text);
  --border-color--border-primary: var(--wl-border);
  --border-color--border-secondary: var(--wl-border);
  --link-color--link-primary: var(--wl-primary);
  --link-color--link-primary-hover: var(--wl-primary-hover);
  --link-color--link-alternate: var(--wl-muted-text);
}

body {
  color: var(--wl-text);
  background-color: var(--wl-background);
  font-family: var(--wl-body-font, Inter, sans-serif);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--wl-text);
  font-family: var(--wl-heading-font, Host Grotesk, sans-serif);
}

::selection {
  background: var(--wl-highlight-bg);
  color: var(--wl-highlight-text);
}

a {
  color: var(--wl-primary);
}

a:hover {
  color: var(--wl-primary-hover);
}

.navbar,
.section,
.section_hero-article,
.footer {
  background-color: var(--wl-surface);
}

.button,
.t-button,
.button.is-form-submit,
.w-button {
  color: var(--wl-primary-text);
  background-color: var(--wl-primary);
  border-color: var(--wl-primary);
}

.button:hover,
.button:focus,
.button:focus-visible,
.button:active,
.t-button:hover,
.t-button:focus,
.t-button:focus-visible,
.t-button:active,
.button.is-form-submit:hover,
.button.is-form-submit:focus,
.button.is-form-submit:focus-visible,
.button.is-form-submit:active,
.w-button:hover,
.w-button:focus,
.w-button:focus-visible,
.w-button:active {
  color: var(--wl-primary-hover-text);
  background-color: var(--wl-primary-hover);
  border-color: var(--wl-primary-hover);
}

.button.is-secondary,
.t-button-secondary {
  color: var(--wl-secondary-text);
  background-color: var(--wl-pill-bg);
  border-color: var(--wl-pill-bg);
}

.button.is-secondary:hover,
.button.is-secondary:focus,
.button.is-secondary:focus-visible,
.button.is-secondary:active,
.t-button-secondary:hover,
.t-button-secondary:focus,
.t-button-secondary:focus-visible,
.t-button-secondary:active {
  color: var(--wl-secondary-hover-text);
  background-color: color-mix(in srgb, var(--wl-pill-bg) 75%, var(--wl-primary));
  border-color: color-mix(in srgb, var(--wl-pill-bg) 75%, var(--wl-primary));
}

.article_card,
.box-contact,
.blog-sidebar-meta {
  background-color: var(--wl-background);
  border: 1px solid var(--wl-border);
}

.category,
.batch {
  background-color: var(--wl-pill-bg);
  color: var(--wl-pill-text);
}

.form_input {
  color: var(--wl-text);
  background-color: var(--wl-surface);
  border-color: var(--wl-border);
}

.form_input:focus,
.form_input:focus-visible {
  border-color: var(--wl-primary);
  box-shadow: 0 0 0 0.2rem var(--wl-focus-ring);
}

.w-checkbox-input--inputType-custom,
.w-form-formradioinput--inputType-custom {
  border-color: var(--wl-border);
}

.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: var(--wl-primary);
  border-color: var(--wl-primary);
}

.w-checkbox-input--inputType-custom.w--redirected-focus,
.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 0 0.2rem var(--wl-focus-ring);
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-color: var(--wl-primary);
}

.footer_link,
.nav_links,
.nav_dropdown-link {
  color: var(--wl-text);
}

.footer_link:hover,
.nav_links:hover,
.nav_dropdown-link:hover {
  color: var(--wl-primary);
}

.nav_links.w--current,
.footer_link.w--current {
  color: var(--wl-primary);
}

.section_hero-article {
  overflow: visible !important;
}

.blog-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
  overflow: visible;
}

.blog-detail-content {
  min-width: 0;
}

.blog-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-self: stretch;
  min-width: 0;
  overflow: visible;
}

.blog-sidebar-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.75rem;
  padding: 1rem;
}

.blog-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.blog-meta-label {
  color: var(--wl-muted-text);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.blog-sidebar-sticky {
  position: sticky;
  top: var(--weblish-sticky-offset, 96px);
  z-index: 1;
  align-self: start;
}

.blog-sticky-cta-banner,
.blog-end-cta-banner {
  --wl-cta-bg-image: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--wl-border);
  border-radius: 1rem;
  padding: 1.5rem;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--wl-primary) 14%, transparent), color-mix(in srgb, var(--wl-accent) 10%, transparent)),
    var(--wl-cta-bg-image),
    var(--wl-surface);
  background-size: cover;
  background-position: center;
}

.blog-end-cta-section {
  margin-top: 2rem;
}

.blog-end-cta-banner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.blog-end-cta-banner .blog-cta-content {
  max-width: 72%;
}

.blog-sticky-cta-banner .blog-cta-content,
.blog-end-cta-banner .blog-cta-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Equal-height related blog cards on single-post page */
.section_blog .blog-slider,
.section_blog .blog_list {
  height: 100%;
}

.section_blog .blog_list .article_card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 28rem;
}

.section_blog .blog_list .w-layout-vflex.padding-xsmall {
  flex: 1;
}

.section_blog .blog_list .heading-style-h4 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.footer-brand-link {
  display: inline-flex;
  margin-bottom: 1rem;
}

.navbar_logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar_logo-link.w-nav-brand {
  height: 90px;
  width: auto;
  max-width: 200px;
}

.footer-brand-logo-image {
  height: 90px;
  width: auto;
  max-width: 200px;
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.footer-contact-item {
  color: var(--wl-muted-text);
  font-size: 0.9rem;
}

.footer-contact-label {
  color: var(--wl-text);
  font-weight: 600;
}

.text-style-quote {
  border-left-color: var(--wl-border);
}

.arrow-normal {
  color: var(--wl-text);
  background-color: var(--wl-surface);
  border-color: var(--wl-border);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--wl-primary);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .blog-detail-layout {
    display: block;
  }

  .blog-sidebar-sticky {
    position: static;
  }

  .blog-end-cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-end-cta-banner .blog-cta-content {
    max-width: 100%;
  }

  .section_blog .blog_list .article_card {
    min-height: 24rem;
  }
}