/*
Theme Name: Hire Node.js Developer
Theme URI: https://weblish.io
Author: Weblish
Author URI: https://weblish.io
Description: A modern WordPress business theme for Hire Node.js Developer. Includes responsive layouts, blog listings, and integrated contact forms for technical hiring inquiries.
Version: 1777371853.deploy-1777749151
Requires at least: 5.0
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: sereniti
Tags: blog, blogging, custom-menu, featured-images, theme-options, responsive-layout

This theme converts Webflow designs to WordPress while preserving all original styling and animations.
*/

/* ==========================================================================
   Global Italic Text Styling - Use Arapey Font
   ========================================================================== */

/*
 * All italic text throughout the theme uses the Arapey font family.
 * This includes <em>, <i> tags, and the .text-style-italic class.
 */

em,
i,
.text-style-italic,
*[style*="font-style: italic"],
*[style*="font-style:italic"] {
  font-family: "Arapey", serif !important;
  font-style: italic;
}

/* Ensure all headings with em/i tags use Arapey */
h1 em, h1 i,
h2 em, h2 i,
h3 em, h3 i,
h4 em, h4 i,
h5 em, h5 i,
h6 em, h6 i,
.heading-style-h1 em, .heading-style-h1 i,
.heading-style-h2 em, .heading-style-h2 i,
.heading-style-h3 em, .heading-style-h3 i,
.text-5xl em, .text-5xl i,
.text-6xl em, .text-6xl i,
.text-7xl em, .text-7xl i {
  font-family: "Arapey", serif !important;
  font-style: italic;
}

/* ==========================================================================
   Hero Section Font Styling - Use Project Fonts
   ========================================================================== */

/* Ensure hero section uses the project's primary font family */
.section_hero,
.section_hero * {
  font-family: var(--font--primary, "Instrument Sans", sans-serif);
}

.section_hero .heading-style-h1 {
  font-family: var(--font--primary, "Instrument Sans", sans-serif);
}

.section_hero .heading-style-h1 em,
.section_hero .heading-style-h1 i {
  font-family: "Arapey", serif !important;
  font-style: italic;
}

.section_hero .hero_text-description,
.section_hero .hero_text-description * {
  font-family: var(--font--primary, "Instrument Sans", sans-serif);
}

.section_hero .button,
.section_hero .button-text {
  font-family: var(--font--primary, "Instrument Sans", sans-serif);
}

/* ==========================================================================
   Brand + Logo Integration
   ========================================================================== */

.navbar_logo,
.footer_logo {
  width: auto;
  height: auto;
  max-height: 90px;
  max-width: 18rem;
}

@media screen and (max-width: 767px) {
  .navbar_logo,
  .footer_logo {
    max-width: 14rem;
    max-height: 72px;
  }
}

.button-bg {
  background-color: var(--brand--pink);
}

/* ==========================================================================
   Brand Color Mapping
   ========================================================================== */

:root {
  --brand--pink: #3c873a;
  --brand--pink-hover: #68a063;
  --brand--black-100: #1f2937;
  --brand--orange: #68a063;
  --brand--yellow: #68a063;
  --brand--gray-700: #3f4d5f;
  --brand--gray-300: #5f6470;
  --brand--gray-100: #edf4ee;
  --brand--gray: #d6e2d8;
  --background-color--bg-primary: #edf4ee;
  --text-color--text-primary: #1f2937;
}

.navbar {
  background-color: #edf4ee;
}

.section_footer {
  background-color: #edf4ee;
}

.nav_links,
.link,
.toggle {
  color: rgba(31, 41, 55, 0.82);
}

.nav_links:hover,
.nav_links.w--current,
.link:hover,
.link.w--current,
.toggle:hover {
  color: #1f2937;
}

.button.is-pink,
.icon-arrow,
.icon-wrap_medium {
  background-color: #3c873a;
}

.button.is-pink:hover {
  background-color: #68a063;
}

/* ==========================================================================
   FAQ Accordion - Interactive Component with State Management
   ========================================================================== */

.faq_item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 1rem !important;
  position: relative !important;
  overflow: hidden !important;
}

.faq_top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
  padding: 0.5rem 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.faq_top:hover {
  opacity: 0.8;
}

.faq_top > * {
  pointer-events: none !important;
}

.faq_bottom-wrap {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: max-height 0.35s ease-out, opacity 0.25s ease-out, padding 0.35s ease-out !important;
}

.faq_item.is-open .faq_bottom-wrap {
  max-height: 500px !important;
  opacity: 1 !important;
  padding-top: 1rem !important;
  padding-bottom: 0.5rem !important;
}

.faq_icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.35s ease !important;
  pointer-events: none !important;
}

.faq_item.is-open .faq_icon {
  transform: rotate(180deg) !important;
}

.faq_icon svg {
  pointer-events: none !important;
}

.faq_top:focus {
  outline: 2px solid #3c873a !important;
  outline-offset: 2px !important;
}

.faq_bottom {
  padding-right: 3rem !important;
}