/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Peroni — Bricks Child Theme
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

/* ============================================================
   PERONI DESIGN SYSTEM
   Fluid typography & spacing | Developer-ready tokens
   ============================================================ */

:root {
  /* === COLORS === */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-navy:  #002889;

  /* === SPACING SCALE (fluid, 4px base) ===
     xs  :  4px  –  8px
     sm  :  8px  – 16px
     md  : 16px  – 32px
     lg  : 32px  – 64px
     xl  : 64px  – 128px
     2xl : 128px – 200px                         */
  --space-xs:  clamp(4px,   0.5vw,  8px);
  --space-sm:  clamp(8px,   1vw,   16px);
  --space-md:  clamp(16px,  2vw,   32px);
  --space-lg:  clamp(32px,  4vw,   64px);
  --space-xl:  clamp(64px,  8vw,  128px);
  --space-2xl: clamp(128px, 12vw, 200px);

  /* === TYPOGRAPHY SCALE (fluid) ===
     h1   : 28px – 40px
     h2   : 28px – 36px
     h3   : 24px – 32px
     h4   : 20px – 28px
     h5   : 18px – 24px
     h6   : 16px – 20px
     base : 16px – 20px
     sm   : 14px – 16px                          */
  --fs-sm:   clamp(14px, 1.2vw,  16px);
  --fs-base: clamp(16px, 1.5vw,  20px);
  --fs-md:   clamp(18px, 1.8vw,  24px);
  --fs-h6:   clamp(16px, 1.5vw,  20px);
  --fs-h5:   clamp(18px, 1.8vw,  24px);
  --fs-h4:   clamp(20px, 2vw,    28px);
  --fs-h3:   clamp(24px, 2.5vw,  32px);
  --fs-h2:   clamp(28px, 3vw,    36px);
  --fs-h1:   clamp(28px, 3.5vw,  40px);
}

/* ============================================================
   BODY
   ============================================================ */
body {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-black);
  background-color: var(--color-white);
}

/* ============================================================
   HEADINGS
   ============================================================ */
h1, .h1 { font-size: var(--fs-h1); line-height: 1.15; font-weight: 700; margin: 0 0 var(--space-md); }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.2;  font-weight: 700; margin: 0 0 var(--space-md); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; margin: 0 0 var(--space-sm); }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.3;  font-weight: 600; margin: 0 0 var(--space-sm); }
h5, .h5 { font-size: var(--fs-h5); line-height: 1.35; font-weight: 600; margin: 0 0 var(--space-xs); }
h6, .h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 600; margin: 0 0 var(--space-xs); }

/* ============================================================
   PARAGRAPH & LINKS
   ============================================================ */
p { font-size: var(--fs-base); line-height: 1.6; margin: 0 0 var(--space-sm); }
a { color: var(--color-navy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   SECTION — default vertical rhythm
   ============================================================ */
.brxe-section {
  padding-top:    var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* ============================================================
   CONTAINER — max-width + horizontal gutters
   ============================================================ */
.brxe-container {
  max-width: 1440px;
  padding-left:  var(--space-lg);
  padding-right: var(--space-lg);
}

/* ============================================================
   BUTTON PRIMARY
   1px solid black | transparent bg | black text | ALL CAPS | 20px
   ============================================================ */
.brxe-button .bricks-button,
.brxe-button a.bricks-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-black);
  background: transparent;
  border: 1px solid var(--color-black);
  border-radius: 0;
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
  line-height: 1;
}
.brxe-button .bricks-button:hover,
.brxe-button a.bricks-button:hover {
  background: var(--color-black);
  color: var(--color-white);
  text-decoration: none;
}

/* ============================================================
   BUTTON SECONDARY
   Használat: add .btn-secondary CSS class-t a Bricks button elemre
   1px solid white | transparent bg | white text
   ============================================================ */
.btn-secondary.brxe-button .bricks-button,
.btn-secondary.brxe-button a.bricks-button {
  color: var(--color-white);
  border-color: var(--color-white);
  background: transparent;
}
.btn-secondary.brxe-button .bricks-button:hover,
.btn-secondary.brxe-button a.bricks-button:hover {
  background: var(--color-white);
  color: var(--color-black);
}