/* FJG Theme (WPUBS Shipping Theme) - Custom Styles */

:root{
  --fjg-content-max: 1200px;
  --fjg-canvas-pad: 18px;

  --fjg-site-bg-color: #ffffff;
  --fjg-site-bg-image: none;
  --fjg-site-bg-repeat: no-repeat;
  --fjg-site-bg-size: cover;
  --fjg-site-bg-attach: scroll;

  --fjg-overlay-r: 255;
  --fjg-overlay-g: 255;
  --fjg-overlay-b: 255;
  --fjg-overlay-a: 0.28;

  --fjg-text-color: #111111;
  --fjg-link-color: #2b59c3;
  --fjg-link-hover: #1f3f8f;

  --fjg-header-bg: #ffffff;
  --fjg-header-text: #111111;

  --fjg-footer-bg: #ffffff;
  --fjg-footer-text: #111111;
}

/* Site background */
body{
  color: var(--fjg-text-color);
  background-color: var(--fjg-site-bg-color);
  background-image: var(--fjg-site-bg-image);
  background-repeat: var(--fjg-site-bg-repeat);
  background-size: var(--fjg-site-bg-size);
  background-attachment: var(--fjg-site-bg-attach);
  background-position: center center;
}

a{ color: var(--fjg-link-color); }
a:hover{ color: var(--fjg-link-hover); }

/* ✅ CANVAS PADDING (this is what you wanted) */
.site-main{
  padding-left: var(--fjg-canvas-pad);
  padding-right: var(--fjg-canvas-pad);
}

/* ✅ Constrain “normal” content width */
.entry-content,
.wp-block-post-content{
  max-width: var(--fjg-content-max);
  margin-left: auto;
  margin-right: auto;
}

/* Gutenberg align support */
.alignwide{
  max-width: calc(var(--fjg-content-max) + 240px);
  margin-left: auto;
  margin-right: auto;
}

/* Alignfull should truly be full-bleed */
.alignfull{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Header / Nav */
.fjg-header-wrapper{
  width: 100%;
  position: relative;
  z-index: 50;
  background: var(--fjg-header-bg);
  color: var(--fjg-header-text);
}
.fjg-header-wrapper a{ color: var(--fjg-header-text); }

.fjg-container{
  width: 100%;
  max-width: var(--fjg-content-max);
  margin: 0 auto;
  padding: 0 var(--fjg-canvas-pad);
}

.fjg-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
}

.fjg-site-logo img{
  max-height: 60px;
  width: auto;
  height: auto;
  display: block;
}

.fjg-nav-toggle{
  display: none;
  border: 1px solid rgba(0,0,0,0.15);
  background: transparent;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1;
  color: var(--fjg-header-text);
}

.fjg-primary-nav ul{
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.fjg-primary-nav a{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.06);
  transition: background-color .15s ease, transform .08s ease;
}

.fjg-primary-nav a:hover{
  background: rgba(0,0,0,0.10);
}
.fjg-primary-nav a:active{
  transform: translateY(1px);
}

/* Mobile menu */
@media (max-width: 920px){
  .fjg-nav-toggle{ display: inline-flex; align-items:center; gap:8px; }
  .fjg-primary-nav{
    display: none;
    width: 100%;
    padding: 10px 0 14px;
  }
  .fjg-primary-nav.is-open{ display: block; }
  .fjg-primary-nav ul{
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
  }
  .fjg-primary-nav a{
    width: 100%;
    justify-content: space-between;
  }
}

/* Footer */
.fjg-footer{
  margin-top: 40px;
  padding: 30px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: var(--fjg-footer-bg);
  color: var(--fjg-footer-text);
}
.fjg-footer a{ color: var(--fjg-footer-text); }

/* ✅ Frosted overlay */
body.fjg-overlay-on .wp-block-kadence-rowlayout:not(.fjg-no-overlay),
body.fjg-overlay-on .wp-block-group:not(.fjg-no-overlay){
  background: rgba(var(--fjg-overlay-r), var(--fjg-overlay-g), var(--fjg-overlay-b), var(--fjg-overlay-a));
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}