/*
Theme Name: Stackline
Theme URI: https://sifency.com/stackline
Author: Sifency
Author URI: https://themeforest.net/user/sifency
Description: Stackline is AI Directory WordPress Theme, built with Elementor and advanced theme options. Perfect for creating websites for AI directory listing.
Version: 1.0.0
Tested up to: 7.1
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stackline
Tags: blog, portfolio, e-commerce, custom-background, featured-images, custom-colors, custom-menu, editor-style, post-formats, sticky-post, threaded-comments, translation-ready, left-sidebar, right-sidebar
*/

/*--------------------------------------------------------------
1 Captions
--------------------------------------------------------------*/
/* Thin (100) */
@font-face {
    font-family: 'Volkart';
    src: url('./assets/fonts/Switzer-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Light (300) - Optional, but common */
@font-face {
    font-family: 'Volkart';
    src: url('./assets/fonts/Switzer-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Regular (400) */
@font-face {
    font-family: 'Volkart';
    src: url('./assets/fonts/Switzer-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Regular Italic (400) */
@font-face {
    font-family: 'Volkart';
    src: url('./assets/fonts/Switzer-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Medium (500) */
@font-face {
    font-family: 'Volkart';
    src: url('./assets/fonts/Switzer-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Semibold (600) */
@font-face {
    font-family: 'Volkart';
    src: url('./assets/fonts/Switzer-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Bold (700) */
@font-face {
    font-family: 'Volkart';
    src: url('./assets/fonts/Switzer-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@media screen and (max-width: 768px ) {
  .classic-content-right .header-elements{
    display: none !important;
  }
}
@media screen and (max-width: 1199px ) {
  .menu_toggle{
    background-color: var(--white-color);
    margin-right: 20px;
    border-radius: 10px;
  }
}
.tagline{
  font-size: 12px;
}
.wp-caption {
    margin-bottom: 1.7em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.bypostauthor {
    display: block;
}

.comment-mailthread {
    margin-bottom: 20px;
}

.comment-log {
    margin-bottom: 10px;
}

.blog-commment-item .children {
    margin-left: 70px;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: none !important;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.logged-in .wp-block-loginout {
    margin-bottom: var(--theme-space-level-1);
    line-height: 125%;
}

/* ==================================================
   TABLE OF CONTENTS
   ==================================================
   1. Layout & Container Widths
   2. Buttons
   3. Typography
   4. Content Spacing
   5. Tabs
   6. Slider Navigation
   7. Rotation Animations
   8. Utility Classes
   9. Testimonials
   10. Footer
   11. Divider Styles
   12. Responsive Styles
   13. Mega Menu
   ================================================== */


/* ==================================================
   1. Layout & Container Widths
   ================================================== */
.sifency-label-style {
  font-size: 0.8rem;
}
.pointer-event-none{
  pointer-events: none !important;
}
.max-w-1920 {
  max-width: 1920px;
}

.max-w-1720 {
  max-width: 1720px;
}

:root {
  --sl-frame-offset: 20px;
  --sl-frame-width: 10px;
  --sl-corner-size: 60px;
  --sl-header-height: 100px;
  --sl-header-radius: 50px;
  --sl-color: #fff;
  --sl-z: 9999;
}

.stackline-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--sl-z);
}

.stackline-frame>div {
  position: fixed;
  background: var(--sl-color);
}

.sst-cursor {
  font-weight: 100;
  opacity: 0.2 !important;
}
/* --------------------------
   Frame Bars
   (top bar removed on purpose — header area stays open/red)
-------------------------- */

/* Right */
.sl-right {
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: var(--sl-frame-width);
}

/* Left */
.sl-left {
  left: 0px;
  top: 0px;
  bottom: 0px;
  width: var(--sl-frame-width);
}

/* Bottom */
.sl-bottom {
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: var(--sl-frame-width);
}

.sl-top {
  top: 0px;
  left: 0px;
  right: 0px;
  height: var(--sl-frame-width);
}
.admin-bar .sl-frame.sl-top {
  top: 31px;
}
.admin-bar .sl-htl, .admin-bar .sl-htr {
  top: 31px;
}

/* --------------------------
   Corners
-------------------------- */

.sl-corner {
  position: fixed;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.sl-corner path {
  fill: var(--sl-color);
}

/* Bottom-left / Bottom-right: outer frame corners (unchanged) */
.sl-bl,
.sl-br {
  width: 55px;
  height: 45px;
  bottom: 0px;
}

.sl-bl {
  left: 0px;
}

.sl-br {
  right: 0px;
  rotate: -80deg;
}

.sl-htl,
.sl-htr {
  width: 55px;
  height: 45px;
  top: 0px;
}

.sl-htl {
  left: 0px;
  rotate: 100deg;
}

.sl-htr {
  right: 0px;
  rotate: 180deg;
}

/* ==================================================
   2. Buttons
   ================================================== */

.sifency-button-wrapper .sifency-button.primary {
  background-color: #090909;
  border: 1px solid #252525;
  border-radius: 10px;
}

a.sifency-button.sifency-button-style.flip-button-wrapper,
.sifency-button,
a.sifency-pricing-btn,
.sifency-addons-primary-button {
  padding: 10px 22px;
  border-radius: 10px;
}

a.sifency-button.sifency-button-style.flip-button-wrapper {
  background-color: #151515;
}


/* ==================================================
   3. Typography
   ================================================== */
/* ==================================================
   4. Content Spacing
   ================================================== */

.sifency-draggable-content p {
  margin: 0;
}

.elementor-widget-sifency_typography_block .sifency-typo-heading {
  margin-bottom: 10px;
}

.elementor-widget-sifency_typography_block .sifency-typo-text {
  margin-bottom: 30px;
}


/* ==================================================
   5. Tabs
   ================================================== */

.e-n-tabs-heading {
  width: fit-content;
  padding: 5px;
  border: 1px solid var(--theme-border-color);
  border-radius: 8px;
}


/* ==================================================
   6. Slider Navigation
   ================================================== */

.sifency-slider-nav-arrow {
  width: 40px;
  height: 40px;
  border: 1px solid var(--sifency-accent-color);
}


/* ==================================================
   7. Rotation Animations
   ================================================== */

@keyframes rotateSmooth {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Base Rotation */
.stackline-rotate {
  animation: rotateSmooth 5s linear infinite;
}

/* Speed Variations */
.rotate-slow {
  animation: rotateSmooth 10s linear infinite;
}

.rotate-medium {
  animation: rotateSmooth 5s linear infinite;
}

.rotate-fast {
  animation: rotateSmooth 2s linear infinite;
}

.sifency-service-item {
  position: relative;
  overflow: hidden;
}

.sifency-addons-blog-item::after{
  height: 100px !important;

}
.sifency-addons-blog-item::after,
.sifency-service-item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;

  width: 143px;
  height: 147px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 143 147' fill='none'%3E%3Cpath fill='%23FBF9ED' d='M142.993 147H0C22.2722 146.031 61.9932 145.5 62.9932 91L63.0713 95.8027C64.1984 79.7073 77.6111 67 93.9932 67H91.4932C110.443 66.1777 140.978 53.2354 142.898 9.03906V0C143.027 3.14908 143.024 6.16044 142.898 9.03906L142.897 67H142.993V147Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;

  pointer-events: none;
  z-index: 1;
}

.sifency-service-count {
  z-index: 2;
}

/* ==================================================
   8. Utility Classes
   ================================================== */

.stackline-d-flex {
  display: flex;
}

/* ==================================================
   12. Responsive Styles
   ================================================== */

/* Mobile */
@media screen and (max-width: 576px) {
  .sifency-service-additional-content {
    display: none;
  }
}

/* ==================================================
   13. Mega Menu
   ================================================== */

.cs-mega_wrapper>li>a {
  pointer-events: none;
  cursor: default;
  font-size: 0.8em;
  color: #888888 !important;
  text-transform: uppercase;
}

.error-page-content-wrap {
  min-height: 100vh;
  padding: 0em 7em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.error-page-content-wrap .error-subtitle {
  margin-bottom: 30px;
}

.error-page-content-wrap .error-title h2 {
  font-size: 3.5em;
  font-weight: 500;
  margin-bottom: 10px;
}

.error-page-content-wrap .error_404_text h1 {
  font-size: 10em;
  font-weight: 100;
}

#stackline-sidebar .sidebar-wrap .widget form select {
  width: 100%;
}

#archives-dropdown--1 {
  width: 100%;
  padding: 12px 16px;
  background: #0c0c0c;
  color: #fff;
  border: 1px solid var(--theme-border-color);
  border-radius: 6px;
  font-size: 15px;
  appearance: none;
  cursor: pointer;
}

#archives-dropdown--1:focus {
  border-color: var(--theme-accent-color);
  box-shadow: none;
  outline: none;
}

/* Prevent form elements from overflowing sidebar widgets */
.sidebar-single select,
.sidebar-single form,
.sidebar-single .textwidget select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure images don't overflow either */
.sidebar-single img {
  max-width: 100%;
  height: auto;
}

/* Prevent any content from breaking the layout */
.sidebar-single .textwidget {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.widget.widget_search.sidebar-single input {
  margin: 0px;
}

#stackline-sidebar .sidebar-wrap {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

#stackline-sidebar .sidebar-wrap {
  background-color: #E7E3D6;
  border-radius: 8px;
  padding: 40px 40px;
}

@media screen and (max-width: 1199px) {
  #stackline-sidebar .sidebar-wrap {
    padding: 0px;
    background-color: transparent;
  }
}

#stackline-sidebar .sidebar-wrap .widget {
  border-radius: 8px;
}

#stackline-sidebar .wp-block-categories-list.wp-block-categories {
  gap: 10px;
}

#stackline-sidebar ul.wp-block-archives-list.wp-block-archives {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#stackline-sidebar ul.wp-block-archives-list.wp-block-archives li {
  width: fit-content;
}

.copyright-wrap {
    border-radius: 20px;
    margin: 0px 10px;
}