/*!
   Theme Name: Ambient
   Theme URI: https://underscores.me/
   Author: Agile
   Author URI: https://www.agiledigitalagency.com/
   Description: Agile component library parent theme.
   Version: 1.0.0
   Text Domain: project-theme
 */

/* Reset/base in header-nav.css (inline). Typography below. */

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  font-size: var(--p-font-size, 1rem);
  text-wrap: pretty;
}

h1 {
  font-family: var(--h1-font-family, var(--primary-font));
  font-size: var(--h1-font-size, 3rem);
  font-weight: var(--h1-font-weight, normal);
}

h2 {
  font-family: var(--h2-font-family, var(--primary-font));
  font-size: var(--h2-font-size, 2.25rem);
  font-weight: var(--h2-font-weight, normal);
}

h3 {
  font-family: var(--h3-font-family, var(--primary-font));
  font-size: var(--h3-font-size, 1.75rem);
  font-weight: var(--h3-font-weight, normal);
}

h4 {
  font-family: var(--h4-font-family, var(--primary-font));
  font-size: var(--h4-font-size, 1.5rem);
  font-weight: var(--h4-font-weight, normal);
}

h5 {
  font-family: var(--h5-font-family, var(--primary-font));
  font-size: var(--h5-font-size, 1.25rem);
  font-weight: var(--h5-font-weight, normal);
}

h6 {
  font-family: var(--h6-font-family, var(--primary-font));
  font-size: var(--h6-font-size, 1rem);
  font-weight: var(--h6-font-weight, normal);
}

/* Main content width (Gutenberg content) */
.entry-content,
.page-content {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 81.25rem;
}

.page-content {
  padding-inline: 2rem;
}

@media (max-width: 48rem) {
  .page-content {
    padding-inline: 1.5rem;
  }

  .wp-block-table {
    padding-inline: 1.5rem;
  }
}

/* Cloudflare Turnstile — iframe is inside closed shadow DOM (not CSS-accessible).
   Constrain the shadow host so the 300px iframe clips instead of stretching the form. */
.wpcf7-turnstile {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow: hidden;
}

/* Windows 125%/150% scaling fixes — classes added by JS in header.php.
   Hero media-full calc() guard moved to hero/index.css base rule. */

.windows-125 .wp-block-table,
.windows-150 .wp-block-table {
  padding-inline: 1.5rem;
}

.windows-150 .cols-5 .icons-text-cta__grid {
  grid-template-columns: repeat(3, 1fr);
}

.windows-150 .cols-4 .icons-text-cta__grid {
  grid-template-columns: repeat(3, 1fr);
}

.windows-150 .pricing__plans--cols-4 {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 64.0625rem) {
  .windows-150 .image-text__grid {
    gap: 2.5rem;
  }
}

.windows-150 .header--presentation2 .header__container {
  padding-inline: 1.5rem;
}

/* ==========================================================================
   CTA Buttons — shared base styles used by all block components
   ========================================================================== */

.cta-button {
  align-items: center;
  border-radius: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 600;
  gap: 0.5rem;
  justify-content: center;
  padding-block: 0.875rem;
  padding-inline: 2rem;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.cta-button--primary {
  background-color: var(--primary-cta-bg, #4285F4);
  border: 2px solid var(--primary-cta-border, #4285F4);
  color: var(--primary-cta-color, #ffffff);
}

.cta-button--primary:hover {
  background-color: var(--primary-cta-hover-bg, #3367D6);
  border-color: var(--primary-cta-hover-border, #3367D6);
  color: var(--primary-cta-hover-color, #ffffff);
  transform: translateY(-2px);
}

.cta-button--secondary {
  background-color: var(--secondary-cta-bg, transparent);
  border: 2px solid var(--secondary-cta-border, #4285F4);
  color: var(--secondary-cta-color, #4285F4);
}

.cta-button--secondary:hover {
  background-color: var(--secondary-cta-hover-bg, #4285F4);
  border-color: var(--secondary-cta-hover-border, #4285F4);
  color: var(--secondary-cta-hover-color, #ffffff);
}

.cta-button--text {
  background-color: transparent;
  border: none;
  color: var(--secondary-cta-color, #4285F4);
  padding-inline: 0;
}

.cta-button--text:hover {
  color: var(--secondary-cta-hover-color, #ffffff);
  text-decoration: underline;
}

.cta-button:focus {
  outline: 2px solid var(--primary-color, #4285F4);
  outline-offset: 2px;
}

.cta-button:focus:not(:focus-visible) {
  outline: none;
}

.cta-button:focus-visible {
  outline: 2px solid var(--primary-color, #4285F4);
  outline-offset: 2px;
}

/* CTA Buttons — narrower on mobile, aligned per component */
@media (max-width: 48rem) {
  section .cta-button {
    inline-size: 85%;
  }

  /* Center buttons only when the component is centered */
  .text-center .cta-button,
  .team--align-centered .cta-button,
  .text-align-centered .cta-button {
    margin-inline: auto;
  }
}

/* ==========================================================================
   Global Utility Classes
   These classes can be applied to any component section
   ========================================================================== */

/* Remove Padding Modifiers — shared across all block sections */
section.no-padding-top {
  padding-block-start: 0;
}

section.no-padding-bottom {
  padding-block-end: 0;
}

section.no-padding-both {
  padding-block: 0;
}

/* Background & Text Colors — dynamic, driven by color schema CSS custom properties */
.white {
  background-color: #fff;
}

section {
  background-color: var(--background-color, transparent);
  color: var(--body-color, #212529);
}

section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
section p,
section li {
  color: var(--body-color, inherit);
}

section a:not(.btn):not([class*="cta"]):not([class*="button"]) {
  color: var(--link-color, var(--primary-color, #2563EB));
}

section a:not(.btn):not([class*="cta"]):not([class*="button"]):hover {
  color: var(--link-hover-color, #1D4ED8);
}

/* Padding Removal */
.no-padding-top {
  padding-block-start: 0 !important;
}

.no-padding-bottom {
  padding-block-end: 0 !important;
}

.no-padding-both {
  padding-block: 0 !important;
}

/* Text Alignment */
.text-left {
  text-align: start;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: end;
}

/* Button Styles - applied via body class from Site Settings (header CTA in header-nav.css, inline) */
body.buttons-rounded .hero__cta,
body.buttons-rounded .image-text__cta,
body.buttons-rounded .icons-text-cta__cta,
body.buttons-rounded .icons-text-cta__item-cta--primary,
body.buttons-rounded .icons-text-cta__item-cta--secondary,
body.buttons-rounded .testimonials__cta,
body.buttons-rounded .faq__cta,
body.buttons-rounded .cta__button,
body.buttons-rounded .logos__cta,
body.buttons-rounded .text-block__cta,
body.buttons-rounded .tabs__cta {
  border-radius: 9999px;
}

body.buttons-slightly-rounded .hero__cta,
body.buttons-slightly-rounded .image-text__cta,
body.buttons-slightly-rounded .icons-text-cta__cta,
body.buttons-slightly-rounded .icons-text-cta__item-cta--primary,
body.buttons-slightly-rounded .icons-text-cta__item-cta--secondary,
body.buttons-slightly-rounded .testimonials__cta,
body.buttons-slightly-rounded .faq__cta,
body.buttons-slightly-rounded .cta__button,
body.buttons-slightly-rounded .logos__cta,
body.buttons-slightly-rounded .text-block__cta,
body.buttons-slightly-rounded .tabs__cta {
  border-radius: 0.5rem;
}

body.buttons-square .hero__cta,
body.buttons-square .image-text__cta,
body.buttons-square .icons-text-cta__cta,
body.buttons-square .icons-text-cta__item-cta--primary,
body.buttons-square .icons-text-cta__item-cta--secondary,
body.buttons-square .testimonials__cta,
body.buttons-square .faq__cta,
body.buttons-square .cta__button,
body.buttons-square .logos__cta,
body.buttons-square .text-block__cta,
body.buttons-square .tabs__cta {
  border-radius: 0;
}

/* ==========================================================================
   Gutenberg core blocks – base styling
   ========================================================================== */

/* Tables */
.wp-block-table {
  inline-size: 100%;
  margin-block: 1.5rem 2rem;
  margin-inline: auto;
  max-inline-size: 81.25rem;
  overflow-x: auto;
}

.wp-block-table table {
  border-collapse: collapse;
  inline-size: 100%;
}

.wp-block-table th,
.wp-block-table td {
  border-bottom: 1px solid #E5E7EB;
  padding: 0.75rem 1rem;
}

.wp-block-table th {
  background-color: #F9FAFB;
  font-weight: 600;
}

.wp-block-table figcaption {
  color: rgba(15, 23, 42, 0.7);
  font-size: 0.875rem;
  margin-block-start: 0.5rem;
}

/* RankMath Table of Contents */
.rank-math-toc-block,
.wp-block-rank-math-toc-block {
  background-color: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 0.75rem;
  inline-size: 100%;
  margin-block: 1.5rem 2rem;
  margin-inline: auto;
  max-inline-size: 81.25rem;
  padding: 1.5rem;
}

.rank-math-toc-block > h2,
.wp-block-rank-math-toc-block > h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-block-end: 0.75rem;
  padding-block-start: 0 !important;
}

.rank-math-toc-block ul,
.rank-math-toc-block ol,
.wp-block-rank-math-toc-block ul,
.wp-block-rank-math-toc-block ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rank-math-toc-block li,
.wp-block-rank-math-toc-block li {
  margin-block: 0.25rem;
}

.rank-math-toc-block a,
.wp-block-rank-math-toc-block a {
  color: var(--light-link-color, #2563EB);
  text-decoration: none;
}

.rank-math-toc-block a:hover,
.wp-block-rank-math-toc-block a:hover {
  color: var(--light-link-hover-color, #1D4ED8);
  text-decoration: underline;
}

/* Code blocks */
.wp-block-code {
  background-color: #0F172A;
  border-radius: 0.75rem;
  color: #E5E7EB;
  inline-size: 100%;
  margin-block: 1.5rem 2rem;
  margin-inline: auto;
  max-inline-size: 81.25rem;
  overflow-x: auto;
  padding: 1rem 1.25rem;
}

.wp-block-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9375rem;
  white-space: pre;
}

/* Shortcode block */
.wp-block-shortcode {
  inline-size: 100%;
  margin-block: 1.5rem 2rem;
  margin-inline: auto;
  max-inline-size: 81.25rem;
}

/* Separator */
.wp-block-separator {
  border: none;
  border-block-start: 1px solid #E5E7EB;
  inline-size: 100%;
  margin-block: 2rem;
  margin-inline: auto;
  max-inline-size: 81.25rem;
}

.wp-block-separator.is-style-wide {
  max-inline-size: none;
}

.wp-block-separator.is-style-dots {
  border: none;
  text-align: center;
}

.wp-block-separator.is-style-dots::before {
  color: rgba(15, 23, 42, 0.4);
  content: "· · ·";
  letter-spacing: 0.5rem;
}

/* Title inline utility classes
   ========================================================================== */

.break-all,
.breakAll {
  display: block;
}

.break-desktop,
.breakDesktop {
  display: inline;
}

@media (min-width: 64.0625rem) {
  .break-desktop,
  .breakDesktop {
    display: block;
  }
}

.text-accent {
  color: var(--accent-color, var(--primary-color, #4285F4));
}

/* Footer Styles */
.footer {
  inline-size: 100%;
  padding-block: 3rem;
  padding-inline: 2rem;
}

/* Footer Dark Background (default) */
.footer.footer--dark {
  background-color: var(--dark-background, #1F2937);
  color: var(--body-color-dark, rgba(255, 255, 255, 0.8));
}

.footer.footer--dark .footer__description {
  color: var(--body-color-dark, rgba(255, 255, 255, 0.7));
}

.footer.footer--dark .footer__menu-column-title {
  color: var(--body-color-dark, rgba(255, 255, 255, 0.9));
}

.footer.footer--dark .footer__menu a,
.footer.footer--dark .footer__horizontal-menu-list a {
  color: var(--body-color-dark, rgba(255, 255, 255, 0.8));
}

.footer.footer--dark .footer__menu a:hover,
.footer.footer--dark .footer__horizontal-menu-list a:hover {
  color: #fff;
}

.footer.footer--dark .footer__copyright {
  color: var(--body-color-dark, rgba(255, 255, 255, 0.6));
}

.footer.footer--dark .footer__bottom {
  border-block-start-color: rgba(255, 255, 255, 0.1);
}

.footer.footer--dark .footer__social-link {
  color: var(--body-color-dark, rgba(255, 255, 255, 0.8));
}

.footer.footer--dark .footer__social-link:hover {
  color: #fff;
}

.footer.footer--dark .footer__social-text {
  color: var(--body-color-dark, rgba(255, 255, 255, 0.8));
}

/* Footer Light Background */
.footer.footer--light {
  background-color: var(--light-background, #ffffff);
  color: var(--body-color-light, #212529);
}

.footer.footer--light .footer__description {
  color: var(--body-color-light, #212529);
}

.footer.footer--light .footer__menu-column-title {
  color: var(--body-color-light, #212529);
  opacity: 0.9;
}

.footer.footer--light .footer__menu a,
.footer.footer--light .footer__horizontal-menu-list a {
  color: var(--body-color-light, #212529);
  opacity: 0.8;
}

.footer.footer--light .footer__menu a:hover,
.footer.footer--light .footer__horizontal-menu-list a:hover {
  opacity: 1;
}

.footer.footer--light .footer__copyright {
  color: var(--body-color-light, #212529);
  opacity: 0.6;
}

.footer.footer--light .footer__bottom {
  border-block-start-color: rgba(0, 0, 0, 0.1);
}

.footer.footer--light .footer__social-link {
  color: var(--body-color-light, #212529);
  opacity: 0.8;
}

.footer.footer--light .footer__social-link:hover {
  opacity: 1;
}

.footer.footer--light .footer__social-text {
  color: var(--body-color-light, #212529);
}

.footer.footer--light .footer__logo--inverted img {
  filter: none;
}

.footer__container {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 81.25rem;
}

.footer__content {
  display: flex;
  gap: 5rem;
}

.footer__brand {
  flex: 1;
}

.footer__logo {
}

.footer__logo a {
  display: inline-block;
}

.footer__logo img {
  block-size: auto;
  display: block;
  inline-size: auto;
  max-block-size: 3rem;
}

.footer__logo--inverted img {
  filter: invert(1);
}

.footer__description {
  font-size: 0.9375rem;
  inline-size: 100%;
  line-height: 1.6;
}

.footer__description p {
  margin-block-end: 0.75rem;
}

.footer__description p:last-child {
  margin-block-end: 0;
}

.footer__nav {
  margin-inline-start: auto;
}

/* Menu Columns */
.footer__menu-columns {
  display: grid;
  gap: 2rem;
}

/* 1 column - takes 60-70% width */
.footer__menu-columns--1 {
  grid-template-columns: 1fr;
  max-inline-size: 70%;
}

/* 2 columns */
.footer__menu-columns--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* 3 columns */
.footer__menu-columns--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 4 columns */
.footer__menu-columns--4 {
  grid-template-columns: repeat(4, 1fr);
}

.footer__menu-column {
  display: flex;
  flex-direction: column;
}

.footer__menu-column-title {
  font-size: 0.9375rem;
  font-weight: 600;
}

.footer__menu-column .footer__menu {
  padding-block-start: 0.75rem;
}

.footer__menu-column .footer__menu:first-child {
  padding-block-start: 0;
}

/* Horizontal Menu */
.footer__horizontal-menu {
  padding-block-start: 2rem;
}

.footer__horizontal-menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Presentation 1 - Horizontal Menu aligned left on desktop */
@media (min-width: 64.0625rem) {
  .footer--presentation1 .footer__horizontal-menu {
    padding-block-start: 1.5rem;
  }

  .footer--presentation1 .footer__horizontal-menu-list {
    justify-content: flex-start;
  }
}

.footer__horizontal-menu-list li {
  margin: 0;
}

.footer__horizontal-menu-list a {
  color: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.footer__horizontal-menu-list a:hover {
  opacity: 1;
}

.footer__menu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__menu--two-columns {
  grid-template-columns: repeat(2, 1fr);
}

.footer__menu li {
  margin: 0;
}

.footer__menu a {
  color: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.footer__menu a:hover {
  opacity: 1;
}

/* Hide sub-menus in footer */
.footer__menu .sub-menu {
  display: none;
}

/* Menu columns should always display items vertically */
.footer__menu-columns .footer__menu {
  display: flex;
  flex-direction: column;
}

.footer__bottom {
  align-items: center;
  border-block-start: 0.0625rem solid;
  display: flex;
  justify-content: space-between;
  margin-block-start: 2rem;
  padding-block-start: 2rem;
}

.footer__copyright {
  font-size: 0.875rem;
  opacity: 0.6;
}

.footer__copyright p {
  display: inline;
  margin: 0;
}

.footer__social {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__social-text {
  font-size: 0.9375rem;
}

.footer__social-icons {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__social-link {
  align-items: center;
  color: inherit;
  display: flex;
  inline-size: 2rem;
  justify-content: center;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.footer__social-link svg {
  block-size: 1.25rem;
  inline-size: 1.25rem;
}

.footer__social-link:hover {
  opacity: 1;
}

/* Presentation 1 - Logo/Description Left, Menu Middle */
.footer--presentation1 .footer__content {
  align-items: flex-start;
  flex-direction: row;
}

.footer--presentation1 .footer__nav {
  justify-content: flex-start;
}

.footer--presentation1 .footer__menu--two-columns {
  grid-template-columns: repeat(2, 1fr);
}

/* Presentation 1 - по-големи разстояния и по-широки колони на десктоп */
@media (min-width: 64.0625rem) {
  .footer--presentation1 .footer__content {
    padding-block-start: 1.5rem;
  }

  .footer--presentation1 .footer__menu-columns {
    gap: 5rem;
  }

  .footer--presentation1 .footer__menu-column {
    min-inline-size: 7.5rem;
  }
}

/* Presentation 2 - Everything Centered */
.footer--presentation2 .footer__content {
  align-items: center;
  flex-direction: column;
  gap: 3rem;
  text-align: center;
}

.footer--presentation2 .footer__description {
  max-inline-size: 37.5rem;
}

.footer--presentation2 .footer__nav {
  margin-inline-start: 0;
}

.footer--presentation2 .footer__horizontal-menu {
  padding-block-start: 3rem;
}

.footer--presentation2 .footer__menu--two-columns {
  grid-template-columns: repeat(2, 1fr);
  justify-items: flex-start;
}

/* Presentation 2 - page titles (column titles) left aligned on desktop */
@media (min-width: 64.0625rem) {
  .footer--presentation2 .footer__menu-columns {
    justify-items: flex-start;
    text-align: left;
  }

  .footer--presentation2 .footer__menu-column {
    align-items: flex-start;
  }

  .footer--presentation2 .footer__menu-column-title {
    text-align: left;
  }

  .footer--presentation2 .footer__menu,
  .footer--presentation2 .footer__menu li,
  .footer--presentation2 .footer__menu a {
    text-align: left;
  }
}

.footer--presentation2 .footer__bottom {
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}

/* Responsive */
@media (max-width: 64rem) {
  .footer__content {
    flex-direction: column;
    gap: 2rem;
  }

  .footer__brand {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .footer__logo {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  .footer__description {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .footer--presentation1 .footer__content {
    align-items: center;
    flex-direction: column;
  }

  .footer--presentation1 .footer__nav {
    inline-size: 100%;
  }

  .footer--presentation1 .footer__menu {
    flex-direction: column;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .footer--presentation2 .footer__menu {
    flex-direction: column;
    gap: 1rem;
  }

  .footer__menu-columns {
    grid-template-columns: 1fr;
    max-inline-size: 100%;
  }

  .footer__menu-column {
    align-items: center;
    text-align: center;
  }

  .footer__horizontal-menu-list {
    align-items: center;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Social — centered on mobile for both presentations */
  .footer--presentation1 .footer__social,
  .footer--presentation2 .footer__social {
    align-items: center;
    flex-direction: column;
    gap: 0.75rem;
  }

  .footer--presentation1 .footer__social-text,
  .footer--presentation2 .footer__social-text {
    inline-size: 100%;
    text-align: center;
  }
}

/* 404 Page - Component-style layout, vertically centered */
.site-main--404 {
  align-items: center;
  display: flex;
  justify-content: center;
}

.error-404 {
  inline-size: 100%;
  padding-block: 4rem;
  padding-inline: 2rem;
}

.error-404__container {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 81.25rem;
}

.error-404__content {
  inline-size: 100%;
}

.error-404__content.text-center .error-404__title,
.error-404__content.text-center .error-404__description {
  text-align: center;
}

.error-404__content.text-center .error-404__description {
  margin-inline: auto;
}

.error-404__content.text-center .error-404__button-wrapper {
  justify-content: center;
}

.error-404__title {
  font-size: var(--h1-font-size, 3rem);
  font-weight: 700;
  line-height: 1.2;
  margin-block-end: 1rem;
}

.error-404__description {
  font-size: var(--p-font-size, 1rem);
  line-height: 1.6;
  margin-block-end: 1.5rem;
  max-inline-size: 37.5rem;
}

.error-404__button-wrapper {
  display: flex;
  gap: 1rem;
  margin-block-start: 0;
}

.error-404__button {
  align-items: center;
  background-color: var(--primary-cta-bg, #4285F4);
  border: 2px solid var(--primary-cta-border, #4285F4);
  border-radius: 0.25rem;
  color: var(--primary-cta-color, #ffffff);
  display: inline-flex;
  font-weight: 500;
  justify-content: center;
  padding-block: 0.75rem;
  padding-inline: 2rem;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.error-404__button:hover {
  background-color: var(--primary-cta-hover-bg, #3367D6);
  border-color: var(--primary-cta-hover-border, #3367D6);
  color: var(--primary-cta-hover-color, #ffffff);
}