/*
 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
*/

:where(p) {
	margin-bottom: 16px;
}

:where(p:last-of-type) {
  margin-bottom: 0;
}

:root {
  /* base colors */
  --light: #ffffff;
  --dark: #000000;
  --gray: #1a1a1a;
  --surface: #2a2a2a;

  /* global (page) */
  --bg: var(--dark);
  --text: var(--light);

  /* section variants */
  --section-light-bg: var(--light);
  --section-light-text: var(--dark);

  --section-dark-bg: var(--dark);
  --section-dark-text: var(--light);
	
   --section-gray-bg: var(--gray);
   --section-surface-bg: var(--surface);
}

/* =========================
   LIGHT MODE (PAGE)
========================= */
body.light {
  --bg: var(--light);
  --text: var(--dark);

  --section-light-bg: var(--dark);
  --section-light-text: var(--light);

  --section-dark-bg: var(--light);
  --section-dark-text: var(--dark);
	
	--section-gray-bg: var(--light);
	--section-surface-bg: #f5f5f5;
	
	background: var(--light);
}

/* =========================
   GLOBAL APPLY
========================= */
body {
  transition: all 0.4s;
}

.opacity {
	opacity: 0.7;
}

.caption .bricks-image-caption {
  position: relative;
  font-size: 14px;
  opacity: 0.7;
  line-height: 1.4;
  background: transparent;
}

.screenshots {
	padding: 24px;
	background: var(--section-surface-bg);
	border-radius: 8px;
}