/*
Theme Name: Socimo
Theme URI: https://socimo.example
Author: Socimo
Description: Custom WordPress theme based on the Solvior Homepage 2 layout.
Version: 0.1.1
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tested up to: 6.8
Tags: business, consulting, portfolio, custom-menu, featured-images, translation-ready
Text Domain: socimo
Domain Path: /languages
*/

/*
Socimo WordPress Theme, (C) 2026 Socimo
Socimo is distributed under the terms of the GNU GPL v2 or later.
*/

/* Theme overrides live here. Base styling comes from assets/css/main.css
   (compiled from assets/sass/) — edit the Sass sources, not main.css. */

/* ---------------------------------------------------------------
   Portfolio filter
   Matches the Solvior demo: square light-grey tabs, solid blue when
   active. Built here because the HTML template ships no filter.
   --------------------------------------------------------------- */

.project-filter {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: center;
   margin-bottom: 60px;
}

.project-filter-btn {
   background-color: var(--tj-color-theme-bg, #e1e8f0);
   border: 0;
   border-radius: 0;
   color: var(--tj-color-heading-primary, #051229);
   cursor: pointer;
   font-family: var(--tj-ff-heading, 'Libre Franklin', sans-serif);
   font-size: 17px;
   font-weight: 700;
   line-height: 1;
   padding: 22px 40px;
   transition: background-color .3s ease, color .3s ease;
}

.project-filter-btn:hover,
.project-filter-btn:focus-visible {
   background-color: var(--tj-color-theme-primary, #0075ff);
   color: #fff;
}

.project-filter-btn.is-active {
   background-color: var(--tj-color-theme-primary, #0075ff);
   color: #fff;
}

.project-col {
   transition: opacity .35s ease, transform .35s ease;
}

.project-col.is-filtered-out {
   opacity: 0;
   transform: scale(.96);
}

.project-empty-msg {
   margin-top: 20px;
   text-align: center;
}

@media (max-width: 575px) {
   .project-filter-btn {
      font-size: 15px;
      padding: 16px 24px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .project-col,
   .project-filter-btn {
      transition: none;
   }
}

/* ---------------------------------------------------------------
   Contact Form 7 compatibility
   CF7 wraps every field in its own span; the template's layout
   expects the input to fill .form-input, so neutralise the wrapper.
   --------------------------------------------------------------- */

.wpcf7-form-control-wrap {
   display: block;
   width: 100%;
}

.wpcf7 form .wpcf7-response-output {
   border-radius: 4px;
   margin: 20px 0 0;
   padding: 12px 18px;
}

.wpcf7-not-valid-tip {
   display: block;
   font-size: 14px;
   margin-top: 6px;
}

/* CF7 renders the spinner inline next to the button */
.wpcf7-spinner {
   margin: 0 0 0 12px;
   vertical-align: middle;
}

/* Contact form: the template's textarea is four rows, not ten. */
.tj-contact-section textarea,
.contact-wrapper textarea,
.wpcf7 textarea {
   min-height: 0;
   height: 120px;
   resize: vertical;
}

/* ---------------------------------------------------------------
   404 page
   The HTML template ships no error page or styles — those belong to
   the separate Solvior WordPress theme. Built here from the site's
   own type scale and colours.
   --------------------------------------------------------------- */

.tj-error__area .error_img {
   color: var(--tj-color-theme-primary, #0075ff);
   margin: 0 auto;
   max-width: 780px;
}

.tj-error__area .error_img svg {
   display: block;
   height: auto;
   width: 100%;
}

.error_number {
   fill: var(--tj-color-theme-primary, #0075ff);
   font-family: var(--tj-ff-heading, 'Libre Franklin', sans-serif);
   font-size: 300px;
   font-weight: 700;
   letter-spacing: -.03em;
}

.error_clouds { opacity: .85; }

.tj-error__area .error_title {
   font-size: clamp(2rem, 4vw, 3rem);
}

.tj-error__area .error_desc {
   margin-left: auto;
   margin-right: auto;
   max-width: 52ch;
}

.tj-error__area .error_button {
   display: flex;
   justify-content: center;
}

@media (max-width: 767px) {
   .error_number { font-size: 200px; }
}