/*
Theme Name: AMPI Bricks Child
Theme URI: https://example.com/
Description: Child theme for Bricks Builder generated from the AMPI design system. Includes AMPI tokens, utility classes, and starter component styles.
Author: Perplexity
Version: 1.0.0
Template: bricks
Text Domain: ampi-bricks-child
*/

:root {
  --ampi-primary: #008A5B;
  --ampi-primary-hover: #006B47;
  --ampi-primary-active: #00543A;
  --ampi-primary-light: #AADDDD;
  --ampi-secondary-green: #008A20;
  --ampi-premium: #720EEC;
  --ampi-warning: #FFBA00;
  --ampi-error: #CF2E2E;
  --ampi-info: #2EA2CC;
  --ampi-text: #333333;
  --ampi-text-secondary: #666666;
  --ampi-text-tertiary: #54514B;
  --ampi-text-muted: #515151;
  --ampi-heading-dark: #2C2A27;
  --ampi-bg: #FFFFFF;
  --ampi-bg-alt: #F0F0F0;
  --ampi-surface: #FCFBFE;
  --ampi-border: #E9E6ED;
  --ampi-disabled-bg: #CCCCCC;
  --ampi-disabled-text: #999999;

  --ampi-radius-0: 0px;
  --ampi-radius-sm: 4px;
  --ampi-radius-md: 8px;
  --ampi-radius-pill: 24px;
  --ampi-radius-circle: 50%;

  --ampi-shadow-raised: 0 1px 3px rgba(0,0,0,.05);
  --ampi-shadow-lifted: 0 4px 12px rgba(0,0,0,.10);
  --ampi-shadow-floating: 0 8px 24px rgba(0,0,0,.15);
  --ampi-shadow-sky: 0 12px 32px rgba(0,0,0,.20);

  --ampi-space-1: 4px;
  --ampi-space-2: 8px;
  --ampi-space-3: 12px;
  --ampi-space-4: 16px;
  --ampi-space-5: 20px;
  --ampi-space-6: 24px;
  --ampi-space-7: 28px;
  --ampi-space-8: 32px;
  --ampi-space-9: 52px;
  --ampi-space-10: 68px;
  --ampi-space-11: 72px;
  --ampi-space-12: 80px;

  --ampi-container: 1440px;
}

body {
  color: var(--ampi-text);
}

h1, .ampi-display, .brxe-heading.ampi-display {
  font-family: 'Kanit', sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 42px;
  color: var(--ampi-heading-dark);
}

h2, .ampi-h2, .brxe-heading.ampi-h2,
h3, .ampi-h3, .brxe-heading.ampi-h3,
nav, .ampi-nav {
  font-family: 'Open Sans', sans-serif;
}

h2, .ampi-h2, .brxe-heading.ampi-h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
}

h3, .ampi-h3, .brxe-heading.ampi-h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
}

body, p, li, .ampi-body, .brxe-text-basic.ampi-body, .brxe-post-content.ampi-body {
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}

a {
  color: var(--ampi-primary);
}

a:hover {
  color: var(--ampi-primary-hover);
}

.ampi-container {
  width: min(100% - 32px, var(--ampi-container));
  margin-inline: auto;
}

.ampi-section {
  padding-block: var(--ampi-space-10);
  padding-inline: var(--ampi-space-4);
}

.ampi-section--alt {
  background: var(--ampi-bg-alt);
}

.ampi-grid {
  display: grid;
  gap: var(--ampi-space-5);
}

.ampi-grid--cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ampi-btn,
.bricks-button.ampi-btn,
a.ampi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--ampi-radius-sm);
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  transition: all .2s ease-in-out;
}

.ampi-btn--primary {
  background: var(--ampi-primary);
  color: #fff;
  border: 0;
}

.ampi-btn--primary:hover {
  background: var(--ampi-primary-hover);
  color: #fff;
}

.ampi-btn--primary:active {
  background: var(--ampi-primary-active);
}

.ampi-btn--secondary {
  background: #fff;
  color: var(--ampi-primary);
  border: 2px solid var(--ampi-primary);
}

.ampi-btn--secondary:hover {
  background: var(--ampi-bg-alt);
  color: var(--ampi-primary-hover);
  border-color: var(--ampi-primary-hover);
}

.ampi-btn--ghost {
  background: transparent;
  color: var(--ampi-primary);
  border: 2px solid var(--ampi-primary-light);
  border-radius: var(--ampi-radius-pill);
}

.ampi-btn--ghost:hover {
  background: var(--ampi-primary-light);
  color: var(--ampi-primary);
}

.ampi-card {
  background: var(--ampi-surface);
  border: 1px solid var(--ampi-border);
  border-radius: var(--ampi-radius-sm);
  padding: var(--ampi-space-6);
  box-shadow: var(--ampi-shadow-lifted);
}

.ampi-card--feature {
  background: #fff;
  border-left: 4px solid var(--ampi-primary);
  box-shadow: var(--ampi-shadow-raised);
}

.ampi-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.ampi-badge--default {
  background: var(--ampi-warning);
  color: var(--ampi-text);
}

.ampi-badge--error {
  background: var(--ampi-error);
  color: #fff;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
select,
textarea,
.ampi-input {
  min-height: 44px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--ampi-border);
  border-radius: var(--ampi-radius-sm);
  background: #fff;
  color: var(--ampi-text);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
}

input:focus,
select:focus,
textarea:focus,
.ampi-input:focus {
  outline: none;
  border-color: var(--ampi-primary);
  box-shadow: 0 0 0 3px rgba(0,138,91,.10);
}

.ampi-nav-cta {
  display: inline-block;
  background: var(--ampi-primary-light);
  color: var(--ampi-primary);
  padding: 4px 12px;
  border-radius: 12px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 1023px) {
  .ampi-grid--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ampi-section {
    padding-block: 40px;
  }

  .ampi-container {
    width: min(100% - 32px, var(--ampi-container));
  }

  .ampi-grid--cards {
    grid-template-columns: 1fr;
  }

  h1, .ampi-display, .brxe-heading.ampi-display {
    font-size: 32px;
    line-height: 1.2;
  }
}