/*
 * CloudLaundry - Blog Styles
 * Includes: shared navbar/footer layout (migrated from landing.css) + blog-specific styles
 */

/* ===================== SHARED: Variables, Reset, Navbar, Footer ===================== */

:root {
  --primary: #2d6b41;
  --primary-dark: #2d6b41;
  --primary-light: #e6f4ea;
  --secondary: #2d6b41;
  /* alias for compat */
  --accent: #f59e0b;
  --text: #0f172a;
  --text-light: #64748b;
  --bg: #f8fafc;
  --card: #ffffff;
  --border: #e2e8f0;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.1);
  --shadow: var(--shadow-md);
  /* alias for compat */
  --radius: 1.5rem;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-display: var(--font-heading);
  --font-main: var(--font-body);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --gradient-primary: linear-gradient(135deg, #2d6b41 0%, #2d6b41 100%);
  --gradient: linear-gradient(135deg, #2d6b41 0%, #2d6b41 100%);
  /* alias for compat */
  --gradient-soft: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  --glass: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(255, 255, 255, 0.3);
  --dark-bg: #0f172a;
  /* alias for compat */
  --footer-bg: #0f172a;
  /* alias for compat */
}

/* Guaranteed-to-work font utilities for the Tailwind-based redesign --
   plain CSS classes, not Tailwind's custom theme tokens, so they keep
   working regardless of which Tailwind CDN version is being served. */
.font-display { font-family: var(--font-heading) !important; }
.font-body { font-family: var(--font-body) !important; }

/* ==========================================================================
   PWA "Open in App" Banner
   ========================================================================== */
.app-banner {
    position: fixed;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 450px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transition: bottom 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-banner.show {
    bottom: 20px;
}

.app-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.app-icon img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.app-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-info strong {
    font-size: 0.95rem;
    color: #0f172a;
    font-family: var(--font-heading);
}

.app-info span {
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-open-app {
    background: var(--primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.btn-dismiss-app {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    color: #64748b;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

/* Hero headings must stay white on dark bg */
.hero h1,
.hero h2,
.hero h3 {
  color: white;
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0.9rem 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--glass-border);
  z-index: 1000;
  transition: var(--transition);
}

.navbar.scrolled {
  padding: 0.7rem 5%;
  box-shadow: var(--shadow);
}

.logo img {
  height: 36px;
  width: auto;
  transition: var(--transition);
}

.navbar.scrolled .logo img {
  height: 30px;
}

.nav-links {
  display: flex;
  gap: 1.8rem;
  list-style: none;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
  transition: var(--transition);
}

.nav-links a:hover {
  color: var(--primary);
}

.nav-links a.login-link {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1.2rem;
  border-radius: 50px;
  background: rgba(56, 135, 82, 0.08);
  transition: var(--transition);
}

.nav-links a.login-link:hover {
  background: rgba(56, 135, 82, 0.15);
  color: var(--primary-dark);
}

.nav-cta {
  background: var(--gradient-primary);
  color: white !important;
  padding: 0.8rem 1.8rem;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none !important;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: white !important;
}

/* Mobile Menu */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--text);
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  background: white;
  padding: 6rem 5% 2rem;
  transition: left 0.4s ease;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: var(--shadow-lg);
}

.mobile-menu.open {
  left: 0;
}

.mobile-menu a {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.mobile-menu a:hover {
  color: var(--primary);
}

.mobile-menu .login-link {
  color: var(--primary);
  background: rgba(56, 135, 82, 0.08);
  border-radius: 50px;
  text-align: center;
}

.mobile-menu .nav-cta {
  display: inline-block;
  text-align: center;
  margin-top: 1rem;
  width: 100%;
}


/* Footer Section */
.footer {
  background: #0f172a;
  color: white;
  padding: 8rem 5% 3rem;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto 5rem;
}

.footer-col h3 {
  color: white;
  margin-bottom: 2rem;
  font-size: 1.25rem;
  font-family: var(--font-heading);
}

.footer-col p {
  color: #94a3b8;
  line-height: 1.7;
  margin-bottom: 2rem;
  font-size: 1rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 1rem;
}

.footer-col a {
  color: #94a3b8;
  text-decoration: none;
  transition: var(--transition);
  font-size: 1rem;
  display: inline-block;
}

.footer-col a:hover {
  color: var(--primary);
  transform: translateX(5px);
}

.social-links {
  display: flex;
  gap: 1.25rem;
}

.social-links a {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: white;
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Growth Section */
.growth {
  padding: 3rem 5%;
  background: #0f172a;
  color: white;
  text-align: center;
  position: relative;
}

.growth .section-title {
  color: white;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
}

.growth-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto 3rem;
}

.state {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.75rem 1.75rem;
  border-radius: 99px;
  font-weight: 600;
  color: #94a3b8;
  transition: var(--transition);
  font-size: 0.95rem;
}

.state:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(56, 135, 82, 0.3);
}

.more-coming {
  color: var(--primary);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.social-links a:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-5px);
  color: white;
}

.footer-bottom {
  text-align: center;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: #64748b;
  font-size: 0.9rem;
}

.footer-bottom a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

/* ============================================================

/* Tablet responsive: navbar + footer */
@media (max-width: 1024px) {
  .nav-links,
  .nav-cta {
    display: none;
  }
  .mobile-toggle {
    display: block;
  }
  .logo img {
    height: 32px;
  }
  .navbar {
    padding: 0.8rem 5%;
  }
  .footer {
    padding: 5rem 5% 2rem;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

/* Mobile responsive: navbar + footer */
@media (max-width: 640px) {
  .footer {
    padding: 4rem 5% 2rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-bottom {
    font-size: 0.8rem;
  }
  .footer-bottom p {
    margin-bottom: 0.5rem;
  }
}

/* ===================== BLOG NAVBAR (matches React Header) ===================== */

.blog-nav {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.blog-nav.scrolled {
  padding: 0.75rem 5%;
  border-bottom-color: #f1f5f9;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.blog-nav__logo img {
  height: 36px;
  width: auto;
  transition: all 0.3s ease;
}

.blog-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #0f172a;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--font-body);
  transition: color 0.2s;
}

.blog-nav__back:hover {
  color: var(--primary);
}

.blog-nav__back i {
  font-size: 0.85rem;
}

/* ===================== BLOG FOOTER (matches React Footer) ===================== */

.blog-footer {
  background: #0f172a;
  color: white;
  padding: 8rem 5% 3rem;
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
}

.blog-footer__top-line {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.blog-footer__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto 6rem;
}

.blog-footer__logo {
  width: 160px;
  height: auto;
  display: block;
  margin-bottom: 1.5rem;
}

.blog-footer__desc {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.blog-footer__socials {
  display: flex;
  gap: 0.75rem;
}

.blog-footer__socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.2s;
}

.blog-footer__socials a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  transform: translateY(-3px);
}

.blog-footer__col h3 {
  color: white;
  font-size: 1rem;
  font-family: var(--font-heading);
  margin-bottom: 2rem;
}

.blog-footer__col-label {
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.5;
}

.blog-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.blog-footer__col ul a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
  display: inline-block;
}

.blog-footer__col ul a:hover {
  color: white;
}

.blog-footer__company-name {
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.blog-footer__rc {
  color: rgba(255,255,255,0.4);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

.blog-footer__address {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.blog-footer__phone {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: white;
  transition: all 0.3s;
}

.blog-footer__phone:hover {
  color: #86efac;
}

.blog-footer__phone-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(45,107,65,0.1);
  border: 1px solid rgba(45,107,65,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #86efac;
  transition: all 0.3s;
  flex-shrink: 0;
}

.blog-footer__phone:hover .blog-footer__phone-icon {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.blog-footer__phone-text {
  display: flex;
  flex-direction: column;
}

.blog-footer__phone-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 800;
  margin-bottom: 2px;
}

.blog-footer__phone-text span:last-child {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.blog-footer__bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}

.blog-footer__bottom p {
  color: rgba(255,255,255,0.4);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.blog-footer__bottom a {
  color: #86efac;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.blog-footer__bottom a:hover {
  color: white;
}

/* Responsive footer */
@media (max-width: 1024px) {
  .blog-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .blog-footer__brand {
    grid-column: span 3;
  }
}

@media (max-width: 640px) {
  .blog-footer {
    padding: 5rem 5% 2rem;
  }
  .blog-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .blog-footer__brand {
    grid-column: span 2;
  }
}

@media (max-width: 420px) {
  .blog-footer__grid {
    grid-template-columns: 1fr;
  }
  .blog-footer__brand {
    grid-column: span 1;
  }
}

/* ===================== BLOG-SPECIFIC STYLES ===================== */

/* 
   CloudLaundry - Blog Styles 
   This file contains all styles for the blog list and detail pages.
   It uses variables from landingpage/base.html or landing.css.
*/

:root {
  --blog-primary: #2d6b41;
  --blog-primary-dark: #2d6b41;
  --blog-primary-light: #e6f4ea;
  --blog-bg: #f8fafc;
  --blog-card: #ffffff;
  --blog-border: #f1f5f9;
  --blog-text: #0f172a;
  --blog-text-light: #64748b;
  --blog-radius: 1.75rem;
  --blog-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
  --blog-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* Layout */
.blog-layout {
  max-width: 1300px;
  margin: 0 auto;
  padding: 2.5rem 5% 4rem;
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 4rem;
}

/* Page header (back link, eyebrow, title, desc) is built with Tailwind utility
   classes directly in the templates so it shares the exact same design
   vocabulary as the React frontend. See blog.html / category_detail.html /
   tag_detail.html for the markup. */

.search-no-results {
  color: var(--blog-text-light);
  font-size: 1.1rem;
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
  background: #f8fafc;
  border-left: 4px solid var(--blog-primary);
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .blog-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
}

/* Blog list cards are now built with Tailwind utility classes directly
   in blog.html / category_detail.html / tag_detail.html. */

/* Post Detail */
.post-content {
  background: var(--blog-card);
  padding: 3.5rem;
  border-radius: var(--blog-radius);
  box-shadow: var(--blog-shadow);
  border: 1px solid var(--blog-border);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.post-content p {
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--blog-text);
  margin-bottom: 1.8rem;
}

.post-content h2 {
  font-size: 1.9rem;
  margin: 3.5rem 0 1.25rem;
  color: #0f172a;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-weight: 800;
  line-height: 1.3;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e6f4ea;
  position: relative;
}

.post-content h2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 3.5rem;
  height: 2px;
  background: #2d6b41;
  border-radius: 2px;
}

.post-content h3 {
  font-size: 1.35rem;
  margin: 2.8rem 0 1rem;
  color: #0f172a;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-weight: 700;
  line-height: 1.4;
  padding-left: 1rem;
  border-left: 4px solid #2d6b41;
}

/* Links inside post body */
.post-content a {
  color: #2d6b41;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(45, 107, 65, 0.35);
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s, background 0.2s;
  border-radius: 3px;
  padding: 0 1px;
}

.post-content a::after {
  content: '\00a0\2197';
  font-size: 0.7em;
  vertical-align: super;
  opacity: 0.65;
  font-weight: 400;
  letter-spacing: 0;
}

.post-content a[href^="/"]::after {
  content: '\00a0\2192';
}

.post-content a:hover {
  color: #1a4d2e;
  text-decoration-color: #2d6b41;
  background: rgba(45, 107, 65, 0.06);
}

.post-content img, .post-content iframe, .post-content video {
  max-width: 100%;
  height: auto;
  border-radius: 1.25rem;
  margin: 2.5rem 0;
  box-shadow: var(--blog-shadow);
}
.post-content pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: keep-all;
}
.post-content table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

.post-content blockquote {
  border-left: 5px solid var(--blog-primary);
  padding: 1.5rem 2rem;
  background: var(--blog-primary-light);
  border-radius: 0.5rem;
  margin: 3rem 0;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--blog-primary-dark);
}

/* Sidebar Widgets */
/* Sidebar (search, categories, recent posts) is now built with Tailwind
   utility classes directly in sidebar.html and its partials. */

@media (max-width: 1024px) {
  .post-content {
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .post-content {
    padding: 1.25rem;
  }
}

/* Pagination is now built with Tailwind utility classes directly in
   blog.html / category_detail.html / tag_detail.html. */

/* Author box, share buttons, related posts, and post tags are now built
   with Tailwind utility classes directly in post_detail.html */