/*
Theme Name:     Twop Newspaper Theme
Template:      	foxiz
Theme URI:      https://2p.com.tr/
Author:         2P
Author URI:     https://2p.com.tr/
Description:    Make your modifications to Twop Newspaper in this child theme.
Version:        1.0.2
Tags:           custom-background, custom-menu, featured-images, theme-options, custom-colors, translation-ready, threaded-comments, translation-ready
*/

/* Your CSS code goes here
-------------------------------------- */

/******** Althawra Heading System – Final Version Without Duplication ********/

/* Base title container */
.thawra-title {
  position: relative;
  display: inline-block;
  text-align: right;
  width: 100%;
  padding-bottom: 30px;
}

/* When inside Elementor widget: style the inner heading */
.thawra-title .elementor-heading-title {
  position: relative;
  display: inline-block;
  padding-bottom: 30px;
  width: 100%;
  text-align: right;
}

/* Apply bar ONLY if .elementor-heading-title exists inside */
.thawra-title .elementor-heading-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 11px;
  width: 40vw;
  max-width: 150px;
  min-width: 80px;
  background: transparent;
}

/* Apply bar directly to .thawra-title IF there's no child heading */
.thawra-title:not(:has(.elementor-heading-title))::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 11px;
  width: 40vw;
  max-width: 150px;
  min-width: 80px;
  background: transparent;
}

/* Green style */
.thawra-title--green .elementor-heading-title::after,
.thawra-title--green:not(:has(.elementor-heading-title))::after {
  background: linear-gradient(
    to left,
    #58B946 0%,
    #58B946 38%,
    #348B43 38%,
    #348B43 68%,
    #125E41 68%,
    #125E41 100%
  );
}

/* White style */
.thawra-title--white .elementor-heading-title::after,
.thawra-title--white:not(:has(.elementor-heading-title))::after {
  background: linear-gradient(
    to left,
    #ffffff 0%,
    #ffffff 38%,
    #f3f6fd 38%,
    #f3f6fd 68%,
    #cfcfcf 68%,
    #cfcfcf 100%
  );
}

/* Small size overrides */
.thawra-title--small .elementor-heading-title,
.thawra-title--small {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 16px;
  line-height: 1.3;
}

.thawra-title--small .elementor-heading-title::after,
.thawra-title--small:not(:has(.elementor-heading-title))::after {
  height: 7px;
  max-width: 89px;
  min-width: 60px;
}

/******** Contact Form [Homepage] – Final with Scoped Heading Fix ********/

/* Contact form container */
.thawra-contact-box {
  background: #f5f7f6;
  padding: 40px 25px;
  border-radius: 30px;
  direction: rtl;
  text-align: right;
  font-family: inherit;
}

/* Subtitle */
.thawra-contact-box .form-subtitle {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #003c31;
}

/* Description */
.thawra-contact-box .form-description {
  font-size: 15px;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.7;
}

/* Textarea */
.thawra-contact-box textarea {
  width: 100%;
  height: 150px;
  border-radius: 20px;
  padding: 15px;
  border: none;
  font-size: 15px;
  color: #444;
  background-color: #fff;
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: 25px;
}

/* Style the submit button */
.thawra-contact-box .custom-submit {
  background-color: #59c14a;
  color: #fff;
  font-size: 18px;
  padding: 10px 20px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  width: 100%;
  font-weight: 700;
  text-align: center;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  direction: rtl;
}

/* Style the arrow icon */
.thawra-contact-box .custom-submit .submit-arrow {
  width: 18px;
  height: auto;
  transition: transform 0.3s ease;
}

/* Hover: only move the arrow */
.thawra-contact-box .custom-submit:hover .submit-arrow {
  transform: translateX(-5px);
}

/* Optional: maintain layout by removing default spinner */
.thawra-contact-box .wpcf7-spinner {
  display: none !important;
}

.thawra-contact-box .wpcf7-spinner {
  position: absolute;
  visibility: hidden;
}

.wpcf7 .wpcf7-form.submitting .wpcf7-spinner {
  visibility: visible;
  position: static;
}

/******** "Show All" Button Arrow Animation  ********/
.text-btn svg {
  transition: transform 0.3s ease, stroke 0.3s ease;
}

.text-btn:hover svg {
  transform: translateX(-5px);
}

/**** Ad Container Styling ****/
.ad-container {
	border-radius: 25px;
	overflow: hidden;
}

.ad-container:hover{
  transition: all 0.6s ease;
  opacity: 0.78;
}

/******** Breaking News Heading  ********/

.breaking-news-heading {
  display: inline-flex;
  align-items: center;
  background-color: #fff; /* Light background */
  color: #004236;         /* Dark text color to match design */
  padding: 6px 10px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  box-shadow: none;
  border: none;
  font-family: inherit;
}

/* Optional: Adjust icon if used */
.breaking-news-heading i {
  margin-left: 8px;
  font-size: 18px;
  color: #004236;
}

.breaking-news-heading i.rbi-fire {
  display: none !important;
}

/****** Show More Ajax Loader Button Style ********/
@media (max-width: 767px) {
  .pagination-wrap.pagination-loadmore a.loadmore-trigger {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #024941;
    color: #fff;
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: none;
  }

  .pagination-wrap.pagination-loadmore a.loadmore-trigger span {
    background-color: transparent;
    color: #fff;
    display: inline-block;
  }

  .pagination-wrap.pagination-loadmore a.loadmore-trigger:hover {
    background-color: #013a35;
  }
}

/****** Fix the Homepage Slider on Mobile ********/

@media (max-width: 767px) {
  .post-slider.swiper-container {
    border-radius: 40px !important;
    overflow: hidden;
  }
	
  /* Optional: Ensure slides and images also respect radius */
  .post-slider .swiper-slide,
  .post-slider .overlay-holder,
  .post-slider .overlay-wrap,
  .post-slider img.featured-img {
    border-radius: 40px;
    overflow: hidden;
  }
	
  .p-featured {
		background: #024941;
   }
}

.p-gradient .p-highlight .overlay-inner {
  background: linear-gradient(to top, #024941 0, #024941 calc(100% - 150px), var(--dark-accent-0) 100%);
}

/****** Single Post ********/

/* Increase the line height in Single Post Title */

h1.s-title {
  line-height: 1.4; /* You can adjust this to 1.4, 1.8, 2, etc. */
}

/* Fixing the categories border radius */

/****** Making the Live Blogging title Yellow ********/

.s-cats .meta-live {
  color: #f5ce45;
}

/****** Dark Mode Modifications - Arrow ********/
body[data-theme="dark"] .elementor-button-icon svg path {
  stroke: #ffffff !important;
}

/****** Dark Mode Modifications - Form Sidebar ********/


/* Dark mode: Contact form container */
body[data-theme="dark"] .thawra-contact-box {
  background-color: #024941;
}

/* Dark mode: Subtitle */
body[data-theme="dark"] .thawra-contact-box .form-subtitle {
  color: #fff;
}

/* Dark mode: Description */
body[data-theme="dark"] .thawra-contact-box .form-description {
  color: #eee;
}

/* Dark mode: Textarea */
body[data-theme="dark"] .thawra-contact-box textarea {
  background-color: #045149;
  color: #fff;
}

/* Dark mode: Response */
body[data-theme="dark"] .wpcf7 form.invalid .wpcf7-response-output {
    color: #102c30;
    background-color: #f5ce45;
}


/* Dark mode: Submit button */
body[data-theme="dark"] .thawra-contact-box .custom-submit {
  background-color: #58b946;
  color: #fff;
}

/* Dark mode: Submit arrow inside button */
body[data-theme="dark"] .thawra-contact-box .custom-submit .submit-arrow {
  filter: brightness(0) invert(1); /* makes dark SVGs white */
}

/* Dark mode: Title */
body[data-theme="dark"] .thawra-contact-box .thawra-title {
  color: #fff;
}

/****** Dark mode: Ajax Load More Button ******/

.pagination-wrap.pagination-loadmore .loadmore-trigger span {
  background-image: none;
  box-shadow: none;
  --btn-primary-h: initial;
  --pagi-accent-color: initial;
}

/* Normal (Light) Mode */
.pagination-wrap.pagination-loadmore .loadmore-trigger span {
  background-color: #024941;
  color: #fff;
}

/* Hover (Light) Mode */
.pagination-wrap.pagination-loadmore .loadmore-trigger:hover span {
  background-color: #57B946;
  color: #fff;
}

/* Dark Mode */
body[data-theme="dark"] .pagination-wrap.pagination-loadmore .loadmore-trigger span {
  background-color: #ffffff;
  color: #024941;
}

/* Hover Dark Mode */
body[data-theme="dark"] .pagination-wrap.pagination-loadmore .loadmore-trigger:hover span {
  background-color: #57B946;
  color: #fff;
}


/******** Read More Index Counter ********/
/* Reset all index counters (rectangle with radius) */
.block-wrap.ict-circle-sqb .p-wrap .counter-el-circle-sqb::before {
  content: counter(post-counter);
  counter-increment: post-counter;
  font-size: 20px;
  border-radius: 16px; /* rectangle with rounded corners */
  background-color: #024941;
  color: #fff;
  margin-inline-start: 10px;
  position: relative;
  z-index: 1;
}

/* Fix the counter position */
.block-wrap.ict-circle-sqb {
  counter-reset: post-counter;
}

/* Remove default Foxiz styling (which adds the yellow curve) */
.block-wrap.ict-circle-sqb .counter-el-circle-sqb {
  position: relative;
}
.block-wrap.ict-circle-sqb .counter-el-circle-sqb::after {
  content: none !important;
  display: none !important;
}

/* First counter gets yellow bg */
.block-wrap.ict-circle-sqb .p-wrap:first-child .counter-el-circle-sqb::before {
  background-color: #58B946;
  color: #fff;
}

/* Dark mode */
body[data-theme="dark"] .block-wrap.ict-circle-sqb .counter-el-circle-sqb::before {
  background-color: #fff;
  color: #024941;
}

body[data-theme="dark"] .block-wrap.ict-circle-sqb .p-wrap:first-child .counter-el-circle-sqb::before {
  background-color: #58B946;
  color: #fff;
}


/******** Comment Box Modifications ********/
.comment-box-header{
	display: none;
}