/*
Theme Name: Blockskit Accounting
Theme URI: https://blockskit.com/blockskit-accounting/
Author: BlockskitDev
Author URI: https://blockskit.com
Description: Blockskit Accounting is a modern, versatile WordPress theme designed for accounting, accountant, advisor, audit, bookkeeping, business, cashflow, company, consultant, consulting, corporate, finance, firm, investment, tax, and other finance websites—no coding required. With full-site editing, you can easily customize every aspect of your site, including headers and footers. Featuring multiple templates, patterns, and style variations, it adapts seamlessly to various aesthetics and business needs.
Template: blockskit-base
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 5.6
License: GPLv3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: blockskit-accounting
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, threaded-comments, translation-ready, wide-blocks, block-styles, blog, portfolio, education

Blockskit Accounting WordPress Theme, Copyright 2025 BlockskitDev
Blockskit Accounting is distributed under the terms of the GNU General Public License v3
*/

.link-button {
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
}

.invert {
  filter: invert(100%);
}

.shrink-0 {
  flex-shrink: 0;
}

.nav-btn {
  display: none;
}

@media (min-width: 600px) {
  .nav-btn {
    display: flex;
  }
}

.z-10 {
  z-index: 10;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .grid-4,
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grid-4,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

.overlap-down {
  position: relative !important;
  margin-bottom: -15.125rem !important; /* moves cards section down */
  z-index: 2 !important;
}

/* Container for hero section */
.home-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  padding: 4rem 6vw;
  background: #050b1a; /* deep navy background */
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Text block styling */
.home-header-text {
  max-width: 600px;
  z-index: 5;
}

.home-header-text h1 {
  font-size: clamp(2.5rem, 4vw, 4rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.home-header-text ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-weight: 500;
  font-size: 1.1rem;
}

.home-header-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.home-header-text a.readon {
  display: inline-block;
  margin-right: 1rem;
  padding: 0.8rem 1.6rem;
  border: 1.5px solid #3178f2;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.home-header-text a.readon.grey.solid {
  background: #3178f2;
  color: #fff;
}

.home-header-text a.readon.grey.outline {
  background: transparent;
  color: #fff;
}

.home-header-text a.readon:hover {
  background: #1b4bb2;
  border-color: #1b4bb2;
}

/* === Image Pillar SVG section === */

.home-header-graphic {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  max-height: 90vh;
}

.home-header-graphic svg {
  width: 100%;
  height: auto;
  max-width: 700px;
}

/* Prevent multiple sets showing at once */
.home-header-graphic.home-header-graphic-mobile,
.home-header-graphic.home-header-graphic-smallest {
  display: none;
}

/* Desktop default */
.home-header-graphic.home-header-graphic-desktop {
  display: flex;
}

/* Adjust visibility for breakpoints */
@media (max-width: 1850px) {
  .home-header-graphic.home-header-graphic-desktop {
    display: none;
  }
  .home-header-graphic.home-header-graphic-mobile {
    display: flex;
  }
}

@media (max-width: 900px) {
  .home-header-container {
    flex-direction: column;
    text-align: center;
    padding: 3rem 2rem;
  }

  .home-header-text {
    max-width: 90%;
  }

  .home-header-graphic {
    margin-top: 2rem;
    max-width: 100%;
    justify-content: center;
  }
}

/* Optional — subtle fade-in animation for text */
.fadeInUp {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grow {
  flex-grow: 1;
}