/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

/* =========================================================
1. GLOBAL RESET
========================================================= */

/* Typography reset
让所有内容间距完全由 Flow System 控制
避免浏览器默认 margin 干扰
*/

:where(
  body:not(.block-editor-writing-flow):not(.editor-styles-wrapper)
)
:where(
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ul,
  ol,
  li,
  figure,
  blockquote,
  hr
) {
  margin-block: 0;
}

/* Safe box model */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Media reset */

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}


/* =========================================================
   2. SECTION + CONTAINER SYSTEM (Optimized)
   ========================================================= */

/* --- 1. Top Level Section (与之前一致的逻辑) --- */
section:where(:not(.bricks-shape-divider):not(section section)) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--brxw-container-gap);
  padding-inline: max(var(--brxw-section-space-horizontal), 20px);
  padding-block: var(--brxw-section-space-vertical);
}

/* =========================================================
   2. SECTION + CONTAINER SYSTEM (Optimized)
   ========================================================= */
section:where(:not(.bricks-shape-divider):not(section section)) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--brxw-container-gap);
  padding-inline: max(var(--brxw-section-space-horizontal), 20px);
  padding-block: var(--brxw-section-space-vertical);
}
section > div:where(:not(.bricks-shape-divider)) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--brxw-content-gap);
  width: 100%;
  max-width: var(--container-max-width, var(--brxw-max-screen-width, 1350px)); 
  
  margin-inline: auto; 
}

/* 增强容器的灵活性，同时保持手动设置的最高优先级 */
:where(.brxe-container) {
  max-width: var(--brxw-max-screen-width, 1350px);
  width: 100%; 
  display: flex;
  flex-direction: column;
}
section > div.width-full {
  max-width: 100% !important;
}

section > div.width-text {
  max-width: var(--brxw-text-width-l);
}
section section:where(:not(.bricks-shape-divider)) {
  padding: 0;
  gap: var(--brxw-content-gap);
}

section.no-spacing {
  padding-block: 0;
  gap: 0;
}
/* =========================================================
3. FLOW SYSTEM
=========================================================

.flow > * + * {
  margin-top:
    var(--brxw-space-m);
}
*/
.flow :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
) {
  margin-top:
    var(--brxw-space-xl);

  margin-bottom:
    var(--brxw-space-xs);

  line-height:
    var(--brxw-line-height-heading);
}


.flow > :first-child {
  margin-top: 0 !important;
}


.flow p {
  line-height:
    var(--brxw-line-height-body);
}

.flow p + p {
  margin-top:
    var(--brxw-space-s);
}


.flow :is(
  ul,
  ol
) {
  padding-left: 1.4em;
}

.flow li {
  line-height:
    var(--brxw-line-height-body);
}

.flow li + li {
  margin-top:
    var(--brxw-space-2xs);
}



.flow h2 + p,
.flow h3 + p,
.flow h4 + p {
  margin-top:
    var(--brxw-space-xs);
}


.flow h2 + ul,
.flow h3 + ul {
  margin-top:
    var(--brxw-space-xs);
}


.flow ul + p,
.flow ol + p {
  margin-top:
    var(--brxw-space-s);
}


.flow * + h2,
.flow * + h3 {
  margin-top:
    var(--brxw-space-xl);
}


.flow img,
.flow video {
  margin-top:
    var(--brxw-space-l);

  border-radius:
    var(--brxw-radius-s);
}


.flow blockquote {
  margin-top:
    var(--brxw-space-l);

  padding-left:
    var(--brxw-space-m);

  border-left:
    3px solid var(--primary);

  color:
    var(--color-text);
}



.flow hr {
  margin-top:
    var(--brxw-space-xl);

  border: none;

  border-top:
    1px solid var(--color-border);
}

.flow small {
  font-size:
    var(--brxw-text-xs);

  color:
    var(--color-text-light);
}


.flow--tight > * + * {
  margin-top:
    var(--brxw-space-s);
}

.flow--loose > * + * {
  margin-top:
    var(--brxw-space-l);
}


/* =========================================================
4. AUTO GRID SYSTEM
========================================================= */

.auto-grid {
  display: grid;
  gap:
    var(--brxw-grid-gap);
}

.auto-grid--xs {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(160px, 100%),
        1fr
      )
    );
}

.auto-grid--s {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(220px, 100%),
        1fr
      )
    );
}

.auto-grid--m {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(280px, 100%),
        1fr
      )
    );
}

.auto-grid--l {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(350px, 100%),
        1fr
      )
    );
}

.auto-grid--xl {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(450px, 100%),
        1fr
      )
    );
}


.grid--center {
  align-items: center;
}

.grid--stretch {
  align-items: stretch;
}


/* =========================================================
1. BASE BUTTON
========================================================= */

.btns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--brxw-space-2xs);

  padding: 0.72em 1.5em;

  border: 1px solid transparent;
  border-radius: var(--brxw-radius-m);

  font-size: var(--brxw-text-s);
  font-weight: 600;
  line-height: 1.1;

  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  transition:
    transform var(--brxw-transition-s),
    background var(--brxw-transition-s),
    color var(--brxw-transition-s),
    border-color var(--brxw-transition-s),
    box-shadow var(--brxw-transition-s),
    opacity var(--brxw-transition-s);

  position: relative;
  isolation: isolate;
}

/* hover base */

.btn:hover {
  transform: translateY(-2px);
}

/* active */

.btn:active {
  transform: translateY(0);
}

/* focus */

.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}


/* =========================================================
2. PRIMARY
========================================================= */

.btn--primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--brxw-shadow-s);
}

.btn--primary:hover {
  background:
    color-mix(in srgb, var(--primary) 85%, black);
  box-shadow: var(--brxw-shadow-m);
}


/* =========================================================
3. SECONDARY
========================================================= */

.btn--secondary {
  background: var(--secondary);
  color: var(--white);
  box-shadow: var(--brxw-shadow-s);
}

.btn--secondary:hover {
  background:
    color-mix(in srgb, var(--secondary) 85%, black);
  box-shadow: var(--brxw-shadow-m);
}


/* =========================================================
4. OUTLINE
========================================================= */

.btn--outline {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.btn--outline:hover {
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--brxw-shadow-s);
}


/* =========================================================
5. GHOST
更明显，不再“看不见”
========================================================= */

.btn--ghost {
  background:
    color-mix(in srgb, var(--primary) 6%, transparent);

  border-color:
    color-mix(in srgb, var(--primary) 14%, transparent);

  color: var(--primary);
}

.btn--ghost:hover {
  background:
    color-mix(in srgb, var(--primary) 12%, transparent);

  border-color:
    color-mix(in srgb, var(--primary) 24%, transparent);
}


/* =========================================================
6. SOFT
现代 B2B 风格
========================================================= */

.btn--soft {
  background:
    color-mix(in srgb, var(--primary) 12%, white);

  color: var(--primary);

  border-color:
    color-mix(in srgb, var(--primary) 10%, transparent);
}

.btn--soft:hover {
  background:
    color-mix(in srgb, var(--primary) 18%, white);

  box-shadow: var(--brxw-shadow-s);
}


/* =========================================================
7. GLASS
Hero Banner 专用
========================================================= */

.btn--glass {
  background:
    color-mix(in srgb, var(--white) 18%, transparent);

  border-color:
    color-mix(in srgb, var(--white) 40%, transparent);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: var(--white);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25);
}

.btn--glass:hover {
  background:
    color-mix(in srgb, var(--white) 28%, transparent);

  border-color:
    color-mix(in srgb, var(--white) 55%, transparent);
}


/* =========================================================
8. ACCENT CTA
高转化按钮（推荐询盘按钮）
========================================================= */

.btn--accent {
  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--secondary)
    );

  color: var(--white);
  border: none;

  box-shadow: var(--brxw-shadow-m);
}

.btn--accent:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--brxw-shadow-l);
}


/* =========================================================
9. DARK
========================================================= */

.btn--dark {
  background: var(--brxw-color-neutral-900);
  color: var(--white);
}

.btn--dark:hover {
  background: var(--brxw-color-neutral-800);
}


/* =========================================================
10. WHITE
深色背景专用
========================================================= */

.btn--white {
  background: var(--white);
  color: var(--primary);
}

.btn--white:hover {
  box-shadow: var(--brxw-shadow-m);
}


/* =========================================================
11. LINK BUTTON
文本型按钮
========================================================= */

.btn--link {
  background: transparent;
  border: none;
  padding-inline: 0;

  color: var(--primary);
  border-radius: 0;
}

.btn--link:hover {
  transform: none;
  text-decoration: underline;
  opacity: 0.9;
}


/* =========================================================
12. SIZE MODIFIERS
========================================================= */

.btn--sm {
  font-size: var(--brxw-text-xs);
  padding: 0.5em 1em;
}

.btn--lg {
  font-size: var(--brxw-text-m);
  padding: 0.95em 2em;
}

.btn--block {
  width: 100%;
}

.btn--pill {
  border-radius: var(--brxw-radius-full);
}

.btn--square {
  border-radius: 0;
}


/* =========================================================
13. SHADOW MODIFIER
========================================================= */

.btn--shadow {
  box-shadow: var(--brxw-shadow-m);
}


/* =========================================================
14. SOFT HOVER ONLY
不抬升版本
========================================================= */

.btn--soft-hover:hover {
  transform: none;
  box-shadow: none;
  opacity: 0.92;
}


/* =========================================================
15. ICON SUPPORT
========================================================= */

.btn__icon {
  display: inline-flex;
  align-items: center;

  transition:
    transform var(--brxw-transition-s),
    opacity var(--brxw-transition-s);
}

.btn:hover .btn__icon {
  transform: translateX(4px);
}


/* =========================================================
16. ICON LEFT
========================================================= */

.btn__icon--left {
  order: -1;
}

.btn:hover .btn__icon--left {
  transform: translateX(-2px);
}

/* =========================================================
6. UTILITY SYSTEM
========================================================= */

.aspect-square {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.aspect-video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.text-limited {
  max-width:
    var(--brxw-text-width-l);
}

.title-limited {
  max-width:
    var(--brxw-title-width-l);
}

.clickable-parent {
  position: relative;
}

.clickable-parent a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* =========================================================
7. GRID GAP SAFE BRIDGE
========================================================= */

section > div:where([class*="grid--"]),
:where([class*="grid--"]),
:where([class*="auto-grid"]) {
  gap:
    var(--brxw-grid-gap);
}
:where(.brxe-accordion .accordion-content-wrapper) a, :where(.brxe-icon-box .content) a, :where(.brxe-list) a, :where(.brxe-post-content):not([data-source="bricks"]) a, :where(.brxe-posts .dynamic p) a, :where(.brxe-shortcode) a, :where(.brxe-tabs .tab-content) a, :where(.brxe-team-members) .description a, :where(.brxe-testimonials) .testimonial-content-wrapper a, :where(.brxe-text) a, :where(a.brxe-text), :where(.brxe-text-basic) a, :where(a.brxe-text-basic), :where(.brxe-post-comments) .comment-content a {
    color: var(--primary-l-1)
}