/* ============================================

 * Lumberock — Style Guide CSS

 * Generated by The Style Guide

 * ============================================ */

@font-face {
  font-family: 'Otilito Sans';
  src: url('/fonts/Otilito%20Sans/TBJOtilito-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Otilito Sans';
  src: url('/fonts/Otilito%20Sans/TBJOtilito-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Otilito Sans';
  src: url('/fonts/Otilito%20Sans/TBJOtilito-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts */
  --wp--preset--font-family--heading: 'Otilito Sans', system-ui, -apple-system, sans-serif;
  --wp--preset--font-family--body: 'Barlow Semi Condensed', system-ui, -apple-system, sans-serif;

  /* Colors */
  --wp--preset--color--cta: #FF9029;
  --wp--custom--color--cta-opposite: #000000;
  --wp--preset--color--cta-alt: #F57600;
  --wp--custom--color--cta-alt-opposite: #000000;
  --wp--preset--color--primary: #0E2047;
  --wp--custom--color--primary-opposite: #FFFFFF;
  --wp--preset--color--primary-alt: #163372;
  --wp--custom--color--primary-alt-opposite: #FFFFFF;
  --wp--preset--color--secondary: #086D5F;
  --wp--custom--color--secondary-opposite: #FFFFFF;
  --wp--preset--color--secondary-alt: #0B9D88;
  --wp--custom--color--secondary-alt-opposite: #000000;
  --wp--preset--color--light: #F9FAFA;
  --wp--custom--color--light-opposite: #000000;
  --wp--preset--color--light-alt: #DDE3E3;
  --wp--custom--color--light-alt-opposite: #000000;
  --wp--preset--color--dark: #192434;
  --wp--custom--color--dark-opposite: #FFFFFF;
  --wp--preset--color--dark-alt: #2A3C56;
  --wp--custom--color--dark-alt-opposite: #FFFFFF;
  --wp--preset--color--tertiary: #365868;
  --wp--custom--color--tertiary-opposite: #FFFFFF;
  --wp--preset--color--tertiary-alt: #47748A;
  --wp--custom--color--tertiary-alt-opposite: #FFFFFF;

  /* Heading scale */
  --wp--custom--fs--h-1: 56px;
  --wp--custom--fs--h-2: 44px;
  --wp--custom--fs--h-3: 34px;
  --wp--custom--fs--h-4: 26px;
  --wp--custom--fs--h-5: 20px;
  --wp--custom--fs--h-6: 16px;

  /* Body scale */
  --wp--preset--font-size--x-small: 12px;
  --wp--preset--font-size--small: 14px;
  --wp--preset--font-size--medium: 16px;
  --wp--preset--font-size--large: 18px;
  --wp--preset--font-size--x-large: 22px;

  /* Spacing scale */
  --wp--preset--spacing--10: 10px;
  --wp--preset--spacing--20: 20px;
  --wp--preset--spacing--30: 30px;
  --wp--preset--spacing--40: 40px;
  --wp--preset--spacing--50: 50px;
  --wp--preset--spacing--60: 60px;
  --wp--preset--spacing--70: 70px;
  --wp--preset--spacing--80: 80px;
  --wp--preset--spacing--90: 90px;
  --wp--preset--spacing--100: 100px;

  /* Shadows */
  --wp--preset--shadow--sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --wp--preset--shadow--md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --wp--preset--shadow--lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --wp--preset--shadow--xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

  /* Gradients (brand base → alt pairs) */
  --wp--preset--gradient--cta: linear-gradient(135deg, var(--wp--preset--color--cta) 0%, var(--wp--preset--color--cta-alt) 100%);
  --wp--preset--gradient--primary: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-alt) 100%);
  --wp--preset--gradient--secondary: linear-gradient(135deg, var(--wp--preset--color--secondary) 0%, var(--wp--preset--color--secondary-alt) 100%);
  --wp--preset--gradient--light: linear-gradient(135deg, var(--wp--preset--color--light) 0%, var(--wp--preset--color--light-alt) 100%);
  --wp--preset--gradient--dark: linear-gradient(135deg, var(--wp--preset--color--dark) 0%, var(--wp--preset--color--dark-alt) 100%);
  --wp--preset--gradient--tertiary: linear-gradient(135deg, var(--wp--preset--color--tertiary) 0%, var(--wp--preset--color--tertiary-alt) 100%);

  /* Radius & buttons */
  --wp--custom--radius--default: 0px;
  --wp--custom--heading--letter-spacing: 0;
  --wp--custom--eyebrow--letter-spacing: 0.12em;
  --wp--custom--heading--base-font-size: 1.2rem;
  --wp--custom--body--base-font-size: 1rem;
  --wp--custom--body--bg: #eefaff;
  --wp--custom--btn--padding-y: 0.75em;
  --wp--custom--btn--padding-x: 1.75em;
  --wp--custom--bg--blur: 4px;

  /* Layout — WordPress-native content/wide widths, plus our custom narrow.
     Narrow is used by blocks that want a tighter max-width than content-size
     (e.g. centered CTAs, center-content body). Child themes override at
     settings.custom.layout.narrow-size in theme.json. */
  --wp--style--global--content-size: 1200px;
  --wp--style--global--wide-size: 1400px;
  --wp--custom--layout--narrow-size: 800px;

  /* Block gap — shared rhythm for every flex/grid container.
     WP emits this from styles.spacing.blockGap in theme.json; we mirror it
     here so .sg-block-* containers + core/columns + core/group (flex|grid)
     all pull from the same token. Child themes override at theme.json level. */
  --wp--style--block-gap: var(--wp--preset--spacing--30);
}

/* Helper classes — colors */

.has-cta-background-color { background-color: var(--wp--preset--color--cta); color: var(--wp--custom--color--cta-opposite); }
.has-cta-color { color: var(--wp--preset--color--cta); }
.has-cta-border-color { border-color: var(--wp--preset--color--cta); }
.has-cta-alt-background-color { background-color: var(--wp--preset--color--cta-alt); color: var(--wp--custom--color--cta-alt-opposite); }
.has-cta-alt-color { color: var(--wp--preset--color--cta-alt); }
.has-cta-alt-border-color { border-color: var(--wp--preset--color--cta-alt); }
.has-primary-background-color { background-color: var(--wp--preset--color--primary); color: var(--wp--custom--color--primary-opposite); }
.has-primary-color { color: var(--wp--preset--color--primary); }
.has-primary-border-color { border-color: var(--wp--preset--color--primary); }
.has-primary-alt-background-color { background-color: var(--wp--preset--color--primary-alt); color: var(--wp--custom--color--primary-alt-opposite); }
.has-primary-alt-color { color: var(--wp--preset--color--primary-alt); }
.has-primary-alt-border-color { border-color: var(--wp--preset--color--primary-alt); }
.has-secondary-background-color { background-color: var(--wp--preset--color--secondary); color: var(--wp--custom--color--secondary-opposite); }
.has-secondary-color { color: var(--wp--preset--color--secondary); }
.has-secondary-border-color { border-color: var(--wp--preset--color--secondary); }
.has-secondary-alt-background-color { background-color: var(--wp--preset--color--secondary-alt); color: var(--wp--custom--color--secondary-alt-opposite); }
.has-secondary-alt-color { color: var(--wp--preset--color--secondary-alt); }
.has-secondary-alt-border-color { border-color: var(--wp--preset--color--secondary-alt); }
.has-light-background-color { background-color: var(--wp--preset--color--light); color: var(--wp--custom--color--light-opposite); }
.has-light-color { color: var(--wp--preset--color--light); }
.has-light-border-color { border-color: var(--wp--preset--color--light); }
.has-light-alt-background-color { background-color: var(--wp--preset--color--light-alt); color: var(--wp--custom--color--light-alt-opposite); }
.has-light-alt-color { color: var(--wp--preset--color--light-alt); }
.has-light-alt-border-color { border-color: var(--wp--preset--color--light-alt); }
.has-dark-background-color { background-color: var(--wp--preset--color--dark); color: var(--wp--custom--color--dark-opposite); }
.has-dark-color { color: var(--wp--preset--color--dark); }
.has-dark-border-color { border-color: var(--wp--preset--color--dark); }
.has-dark-alt-background-color { background-color: var(--wp--preset--color--dark-alt); color: var(--wp--custom--color--dark-alt-opposite); }
.has-dark-alt-color { color: var(--wp--preset--color--dark-alt); }
.has-dark-alt-border-color { border-color: var(--wp--preset--color--dark-alt); }
.has-tertiary-background-color { background-color: var(--wp--preset--color--tertiary); color: var(--wp--custom--color--tertiary-opposite); }
.has-tertiary-color { color: var(--wp--preset--color--tertiary); }
.has-tertiary-border-color { border-color: var(--wp--preset--color--tertiary); }
.has-tertiary-alt-background-color { background-color: var(--wp--preset--color--tertiary-alt); color: var(--wp--custom--color--tertiary-alt-opposite); }
.has-tertiary-alt-color { color: var(--wp--preset--color--tertiary-alt); }
.has-tertiary-alt-border-color { border-color: var(--wp--preset--color--tertiary-alt); }

/* Helper classes — gradients */

.has-cta-gradient-background { background: var(--wp--preset--gradient--cta); color: var(--wp--custom--color--cta-opposite); }
.has-primary-gradient-background { background: var(--wp--preset--gradient--primary); color: var(--wp--custom--color--primary-opposite); }
.has-secondary-gradient-background { background: var(--wp--preset--gradient--secondary); color: var(--wp--custom--color--secondary-opposite); }
.has-light-gradient-background { background: var(--wp--preset--gradient--light); color: var(--wp--custom--color--light-opposite); }
.has-dark-gradient-background { background: var(--wp--preset--gradient--dark); color: var(--wp--custom--color--dark-opposite); }
.has-tertiary-gradient-background { background: var(--wp--preset--gradient--tertiary); color: var(--wp--custom--color--tertiary-opposite); }

/* Helper classes — font sizes */

.has-x-small-font-size { font-size: var(--wp--preset--font-size--x-small); }
.has-small-font-size { font-size: var(--wp--preset--font-size--small); }
.has-medium-font-size { font-size: var(--wp--preset--font-size--medium); }
.has-large-font-size { font-size: var(--wp--preset--font-size--large); }
.has-x-large-font-size { font-size: var(--wp--preset--font-size--x-large); }

/* Typography */

body, .sg-body { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); line-height: 1.6; color: var(--wp--preset--color--dark); background: var(--wp--custom--body--bg); }
p { margin: 0; }
p + p { margin-top: 1em; }
h1, .h1, .sg-h1, h2, .h2, .sg-h2, h3, .h3, .sg-h3, h4, .h4, .sg-h4, h5, .h5, .sg-h5, h6, .h6, .sg-h6 { font-family: var(--wp--preset--font-family--heading); letter-spacing: var(--wp--custom--heading--letter-spacing); line-height: 0.9em; margin: 0; text-transform: uppercase; }
h1, .h1, .sg-h1 { font-size: var(--wp--custom--fs--h-1); }
h2, .h2, .sg-h2 { font-size: var(--wp--custom--fs--h-2); }
h3, .h3, .sg-h3 { font-size: var(--wp--custom--fs--h-3); }
h4, .h4, .sg-h4 { font-size: var(--wp--custom--fs--h-4); }
h5, .h5, .sg-h5 { font-size: var(--wp--custom--fs--h-5); }
h6, .h6, .sg-h6 { font-size: var(--wp--custom--fs--h-6); }

/* Buttons */

.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--wp--custom--radius--default);
  padding: var(--wp--custom--btn--padding-y) var(--wp--custom--btn--padding-x);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wp-block-buttons {
  display: flex;
  gap: var(--wp--preset--spacing--10);
  flex-wrap: wrap;
}

/* Buttons — per-color hover (base → -alt) */

.wp-block-button__link.has-cta-background-color:hover { background-color: var(--wp--preset--color--cta-alt); color: var(--wp--custom--color--cta-alt-opposite); }
.wp-block-button__link.has-primary-background-color:hover { background-color: var(--wp--preset--color--primary-alt); color: var(--wp--custom--color--primary-alt-opposite); }
.wp-block-button__link.has-secondary-background-color:hover { background-color: var(--wp--preset--color--secondary-alt); color: var(--wp--custom--color--secondary-alt-opposite); }
.wp-block-button__link.has-light-background-color:hover { background-color: var(--wp--preset--color--light-alt); color: var(--wp--custom--color--light-alt-opposite); }
.wp-block-button__link.has-dark-background-color:hover { background-color: var(--wp--preset--color--dark-alt); color: var(--wp--custom--color--dark-alt-opposite); }
.wp-block-button__link.has-tertiary-background-color:hover { background-color: var(--wp--preset--color--tertiary-alt); color: var(--wp--custom--color--tertiary-alt-opposite); }

/* Feature Grid + Icon Feature Row — inverse-icon rules per palette slug */

.sg-block-feature.has-cta-background-color .sg-block-feature-icon { background-color: var(--wp--custom--color--cta-opposite); color: var(--wp--preset--color--cta); }
.sg-block-feature-row-item.has-cta-background-color .sg-block-feature-row-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--wp--preset--spacing--40); height: var(--wp--preset--spacing--40); background-color: var(--wp--custom--color--cta-opposite); color: var(--wp--preset--color--cta); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--spacing--20); }
.sg-block-feature.has-cta-alt-background-color .sg-block-feature-icon { background-color: var(--wp--custom--color--cta-alt-opposite); color: var(--wp--preset--color--cta-alt); }
.sg-block-feature-row-item.has-cta-alt-background-color .sg-block-feature-row-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--wp--preset--spacing--40); height: var(--wp--preset--spacing--40); background-color: var(--wp--custom--color--cta-alt-opposite); color: var(--wp--preset--color--cta-alt); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--spacing--20); }
.sg-block-feature.has-primary-background-color .sg-block-feature-icon { background-color: var(--wp--custom--color--primary-opposite); color: var(--wp--preset--color--primary); }
.sg-block-feature-row-item.has-primary-background-color .sg-block-feature-row-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--wp--preset--spacing--40); height: var(--wp--preset--spacing--40); background-color: var(--wp--custom--color--primary-opposite); color: var(--wp--preset--color--primary); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--spacing--20); }
.sg-block-feature.has-primary-alt-background-color .sg-block-feature-icon { background-color: var(--wp--custom--color--primary-alt-opposite); color: var(--wp--preset--color--primary-alt); }
.sg-block-feature-row-item.has-primary-alt-background-color .sg-block-feature-row-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--wp--preset--spacing--40); height: var(--wp--preset--spacing--40); background-color: var(--wp--custom--color--primary-alt-opposite); color: var(--wp--preset--color--primary-alt); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--spacing--20); }
.sg-block-feature.has-secondary-background-color .sg-block-feature-icon { background-color: var(--wp--custom--color--secondary-opposite); color: var(--wp--preset--color--secondary); }
.sg-block-feature-row-item.has-secondary-background-color .sg-block-feature-row-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--wp--preset--spacing--40); height: var(--wp--preset--spacing--40); background-color: var(--wp--custom--color--secondary-opposite); color: var(--wp--preset--color--secondary); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--spacing--20); }
.sg-block-feature.has-secondary-alt-background-color .sg-block-feature-icon { background-color: var(--wp--custom--color--secondary-alt-opposite); color: var(--wp--preset--color--secondary-alt); }
.sg-block-feature-row-item.has-secondary-alt-background-color .sg-block-feature-row-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--wp--preset--spacing--40); height: var(--wp--preset--spacing--40); background-color: var(--wp--custom--color--secondary-alt-opposite); color: var(--wp--preset--color--secondary-alt); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--spacing--20); }
.sg-block-feature.has-light-background-color .sg-block-feature-icon { background-color: var(--wp--custom--color--light-opposite); color: var(--wp--preset--color--light); }
.sg-block-feature-row-item.has-light-background-color .sg-block-feature-row-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--wp--preset--spacing--40); height: var(--wp--preset--spacing--40); background-color: var(--wp--custom--color--light-opposite); color: var(--wp--preset--color--light); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--spacing--20); }
.sg-block-feature.has-light-alt-background-color .sg-block-feature-icon { background-color: var(--wp--custom--color--light-alt-opposite); color: var(--wp--preset--color--light-alt); }
.sg-block-feature-row-item.has-light-alt-background-color .sg-block-feature-row-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--wp--preset--spacing--40); height: var(--wp--preset--spacing--40); background-color: var(--wp--custom--color--light-alt-opposite); color: var(--wp--preset--color--light-alt); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--spacing--20); }
.sg-block-feature.has-dark-background-color .sg-block-feature-icon { background-color: var(--wp--custom--color--dark-opposite); color: var(--wp--preset--color--dark); }
.sg-block-feature-row-item.has-dark-background-color .sg-block-feature-row-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--wp--preset--spacing--40); height: var(--wp--preset--spacing--40); background-color: var(--wp--custom--color--dark-opposite); color: var(--wp--preset--color--dark); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--spacing--20); }
.sg-block-feature.has-dark-alt-background-color .sg-block-feature-icon { background-color: var(--wp--custom--color--dark-alt-opposite); color: var(--wp--preset--color--dark-alt); }
.sg-block-feature-row-item.has-dark-alt-background-color .sg-block-feature-row-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--wp--preset--spacing--40); height: var(--wp--preset--spacing--40); background-color: var(--wp--custom--color--dark-alt-opposite); color: var(--wp--preset--color--dark-alt); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--spacing--20); }
.sg-block-feature.has-tertiary-background-color .sg-block-feature-icon { background-color: var(--wp--custom--color--tertiary-opposite); color: var(--wp--preset--color--tertiary); }
.sg-block-feature-row-item.has-tertiary-background-color .sg-block-feature-row-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--wp--preset--spacing--40); height: var(--wp--preset--spacing--40); background-color: var(--wp--custom--color--tertiary-opposite); color: var(--wp--preset--color--tertiary); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--spacing--20); }
.sg-block-feature.has-tertiary-alt-background-color .sg-block-feature-icon { background-color: var(--wp--custom--color--tertiary-alt-opposite); color: var(--wp--preset--color--tertiary-alt); }
.sg-block-feature-row-item.has-tertiary-alt-background-color .sg-block-feature-row-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--wp--preset--spacing--40); height: var(--wp--preset--spacing--40); background-color: var(--wp--custom--color--tertiary-alt-opposite); color: var(--wp--preset--color--tertiary-alt); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--spacing--20); }

/* Layout — alignwide / alignfull / is-layout-constrained */

.is-layout-constrained > :where(:not(.alignfull):not(.alignwide)) {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
}
.is-layout-constrained > .alignwide {
  max-width: var(--wp--style--global--wide-size);
  margin-left: auto;
  margin-right: auto;
}
.is-layout-constrained > .alignfull {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Forms */

.sg-input, .sg-select, .sg-textarea {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--medium);
  padding: 0.625em 0.875em;
  border: 1px solid #D0D5DD;
  border-radius: var(--wp--custom--radius--default);
  background: #FFFFFF;
  width: 100%;
}
.sg-input:focus, .sg-select:focus, .sg-textarea:focus {
  outline: 2px solid var(--wp--preset--color--cta);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--cta);
}

/* Custom overrides */
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
.sg-h1 span, .sg-h2 span, .sg-h3 span, .sg-h4 span, .sg-h5 span, .sg-h6 span {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-primary);
}

.sg-preview {
  --bg-texture: url('/clients/lumberock/wood-texture.png');
  --bg-texture-sand: url('/clients/lumberock/sand-texture.png');
  --bg-texture-size: 40% auto;
  --bg-texture-angle: 45deg;
  background-image: url('/clients/lumberock/bg.png');
  background-repeat: repeat;
}