/*
 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.1
 Text Domain:  bricks
*/

/* Minimal Method 21 Styling */

/* Stag Black Italic for H1s */
@font-face {
  font-family: 'Stag Black Italic';
  src: url('fonts/stag-blackitalic.woff2') format('woff2'),
       url('fonts/stag-blackitalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --m21-bg: #f8f7f4;
  --m21-text: #1a1a1a;
  --m21-font: Georgia, Cambria, "Palatino Linotype", Palatino, serif;
  --m21-heading-font: 'Stag Black Italic', Georgia, serif;
}

/* Reset structural styling - scoped to frontend only */
body.brx-body {
  background-color: var(--m21-bg);
  color: var(--m21-text);
  font-family: var(--m21-font);
  margin: 0;
  padding: 0;
}

/* Typography - scoped to Bricks content areas */

/* H1 - Stag Black Italic - ALL H1s site-wide */
h1,
h1.brxe-heading,
.brxe-heading[data-tag="h1"],
#brx-header h1,
#brx-content h1,
#brx-footer h1,
.brxe-post-title {
  font-family: 'Stag Black Italic', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  color: var(--m21-text);
  margin-bottom: 1.5rem;
}

/* H2-H6 - Georgia */
#brx-header h2, #brx-header h3, #brx-header h4, #brx-header h5, #brx-header h6,
#brx-content h2, #brx-content h3, #brx-content h4, #brx-content h5, #brx-content h6,
#brx-footer h2, #brx-footer h3, #brx-footer h4, #brx-footer h5, #brx-footer h6,
.brxe-heading {
  font-family: var(--m21-font);
  color: var(--m21-text);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

#brx-header p, #brx-header li,
#brx-content p, #brx-content li,
#brx-footer p, #brx-footer li,
.brxe-text, .brxe-text-basic {
  font-family: var(--m21-font);
  color: var(--m21-text);
  line-height: 1.7;
}

/* Spacing between text blocks */
#brx-content .brxe-text,
#brx-content .brxe-heading {
  margin-bottom: 1.25rem;
}

#brx-content .brxe-text:last-child {
  margin-bottom: 0;
}

/* Lists spacing */
#brx-content ul, #brx-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

#brx-content li {
  margin-bottom: 0.5rem;
}

#brx-header a, #brx-content a, #brx-footer a {
  color: var(--m21-text);
  text-decoration: underline;
}

#brx-header a:hover, #brx-content a:hover, #brx-footer a:hover {
  opacity: 0.7;
}

/* Buttons - minimal styling */
#brx-header .brxe-button,
#brx-content .brxe-button,
#brx-footer .brxe-button {
  background: transparent;
  border: 1px solid var(--m21-text);
  color: var(--m21-text);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-family: var(--m21-font);
}

#brx-header .brxe-button:hover,
#brx-content .brxe-button:hover,
#brx-footer .brxe-button:hover {
  background: var(--m21-text);
  color: var(--m21-bg);
}

/* Content area */
#brx-content {
  background-color: var(--m21-bg);
  margin: 2rem auto;
  padding: 0 2rem;
}

/* Override Bricks backgrounds - scoped */
#brx-header .brxe-section,
#brx-header .brxe-container,
#brx-content .brxe-section,
#brx-content .brxe-container,
#brx-footer .brxe-section,
#brx-footer .brxe-container {
  background-color: transparent;
  background-image: none;
}