.elementor-174 .elementor-element.elementor-element-bac2fb4{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-174 .elementor-element.elementor-element-fba011e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:7em;--padding-bottom:7em;--padding-left:0em;--padding-right:0em;}.elementor-174 .elementor-element.elementor-element-a75cc58{text-align:center;}.elementor-174 .elementor-element.elementor-element-a75cc58 .elementor-heading-title{font-family:var( --e-global-typography-e5f7065-font-family ), Sans-serif;font-size:var( --e-global-typography-e5f7065-font-size );font-weight:var( --e-global-typography-e5f7065-font-weight );text-transform:var( --e-global-typography-e5f7065-text-transform );line-height:var( --e-global-typography-e5f7065-line-height );letter-spacing:var( --e-global-typography-e5f7065-letter-spacing );color:var( --e-global-color-d79e5ec );}.elementor-174 .elementor-element.elementor-element-b00a15d{text-align:center;}.elementor-174 .elementor-element.elementor-element-b00a15d .elementor-heading-title{font-family:"Space Grotesk", Sans-serif;font-size:3.4rem;font-weight:700;text-transform:capitalize;line-height:1.2em;}.elementor-174 .elementor-element.elementor-element-9fecd31{width:var( --container-widget-width, 65% );max-width:65%;--container-widget-width:65%;--container-widget-flex-grow:0;text-align:center;}.elementor-174 .elementor-element.elementor-element-1cb80be2 > .elementor-container{max-width:1200px;}.elementor-174 .elementor-element.elementor-element-1cb80be2{margin-top:0px;margin-bottom:0px;padding:100px 0px 100px 0px;}.elementor-174 .elementor-element.elementor-element-6f1c5dd3.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-174 .elementor-element.elementor-element-6f1c5dd3 > .elementor-element-populated{margin:0px 0px 0px 10px;--e-column-margin-right:0px;--e-column-margin-left:10px;}.elementor-174 .elementor-element.elementor-element-5bf3fcca{width:var( --container-widget-width, 48.063% );max-width:48.063%;--container-widget-width:48.063%;--container-widget-flex-grow:0;}.elementor-174 .elementor-element.elementor-element-5bf3fcca.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-174 .elementor-element.elementor-element-7578355{--display:flex;}.elementor-174 .elementor-element.elementor-element-7578355.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-174 .elementor-element.elementor-element-78dbb73 > .elementor-widget-container{padding:0px 0px 60px 0px;}.elementor-174 .elementor-element.elementor-element-78dbb73.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-174 .elementor-element.elementor-element-e4b6394{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-174 .elementor-element.elementor-element-827387c > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-174 .elementor-element.elementor-element-e3dafec{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-174 .elementor-element.elementor-element-4488203 > .elementor-widget-container{padding:0px 0px 0px 0px;}@media(max-width:1024px) and (min-width:768px){.elementor-174 .elementor-element.elementor-element-6f1c5dd3{width:100%;}}@media(max-width:1024px){.elementor-174 .elementor-element.elementor-element-a75cc58 .elementor-heading-title{font-size:var( --e-global-typography-e5f7065-font-size );line-height:var( --e-global-typography-e5f7065-line-height );letter-spacing:var( --e-global-typography-e5f7065-letter-spacing );}.elementor-174 .elementor-element.elementor-element-b00a15d .elementor-heading-title{font-size:2.7rem;line-height:1.2em;}.elementor-174 .elementor-element.elementor-element-9fecd31{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-174 .elementor-element.elementor-element-1cb80be2{margin-top:0px;margin-bottom:0px;padding:80px 10px 80px 10px;}.elementor-174 .elementor-element.elementor-element-6f1c5dd3.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-174 .elementor-element.elementor-element-6f1c5dd3 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-174 .elementor-element.elementor-element-5bf3fcca{width:var( --container-widget-width, 361.688px );max-width:361.688px;--container-widget-width:361.688px;--container-widget-flex-grow:0;}}@media(max-width:767px){.elementor-174 .elementor-element.elementor-element-fba011e{--padding-top:02em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-174 .elementor-element.elementor-element-a75cc58{text-align:center;}.elementor-174 .elementor-element.elementor-element-a75cc58 .elementor-heading-title{font-size:var( --e-global-typography-e5f7065-font-size );line-height:var( --e-global-typography-e5f7065-line-height );letter-spacing:var( --e-global-typography-e5f7065-letter-spacing );}.elementor-174 .elementor-element.elementor-element-b00a15d{text-align:center;}.elementor-174 .elementor-element.elementor-element-b00a15d .elementor-heading-title{font-size:2rem;line-height:1.2em;}.elementor-174 .elementor-element.elementor-element-9fecd31{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;text-align:center;}.elementor-174 .elementor-element.elementor-element-1cb80be2{margin-top:0px;margin-bottom:0px;padding:50px 5px 50px 5px;}.elementor-174 .elementor-element.elementor-element-5bf3fcca{width:var( --container-widget-width, 362px );max-width:362px;--container-widget-width:362px;--container-widget-flex-grow:0;}.elementor-174 .elementor-element.elementor-element-5bf3fcca > .elementor-widget-container{padding:15px 15px 15px 15px;}.elementor-174 .elementor-element.elementor-element-7578355{--width:308px;}.elementor-174 .elementor-element.elementor-element-78dbb73 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-5bf3fcca *//* ===== Knobby's Kids: Facebook Page card (palette, centered, no scrollbars) ===== */

/* Full-width card that uses the site palette */
.kk-fb-card{
  --kk-card-radius: var(--kk-radius, 12px);
  width:100%; max-width:100%;
  background: var(--kk-blue-050) !important;  /* kill any black bg */
  border:1px solid var(--kk-border);
  border-radius: var(--kk-card-radius);
  box-shadow: 0 12px 32px rgba(2,12,27,.08);
  padding: 16px 16px 20px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* brand accent bar */
.kk-fb-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:6px;
  background: linear-gradient(90deg, var(--kk-blue-500), var(--kk-blue-700));
}

/* Title in solid brand blue (no transparency) */
.kk-fb-title {
  color: var(--kk-blue-500) !important;   /* brand blue */
  opacity: 1 !important;                  /* ensure it’s not faded */
  text-align: center;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  margin: 12px 0 16px;
}
/* Force the FB title to render solid Knobby’s Blue */
.kk-fb-card h2.kk-fb-title,
.elementor-widget-html .kk-fb-card h2.kk-fb-title {
  color: #00A9E0 !important;   /* Knobby’s Kids Blue (hex value) */
  opacity: 1 !important;       /* kill transparency */
  filter: none !important;     /* just in case Elementor added filters */
  text-shadow: none !important;/* prevent washed-out effect */
}


/* Stage: centers the plugin at its hard max width */
.kk-fb-stage{
  display:grid; place-items:center;
  width:100%; max-width:100%;
}

/* Inner frame (white rounded box) */
.kk-fb-frame{
  background:#fff;
  border:1px solid var(--kk-border);
  border-radius: calc(var(--kk-card-radius) - 4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  width:100%; max-width: 520px;      /* room for borders; plugin is 500px */
  overflow:hidden;
}

/* Make FB SDK output fluid and centered */
.kk-fb-frame .fb-page,
.kk-fb-frame .fb-page > span,
.kk-fb-frame .fb-page iframe{
  display:block !important;
  width:100% !important;
  max-width:500px !important;         /* FB max */
  margin:0 auto !important;
  border:0 !important;
  overflow:hidden !important;
}

/* Elementor sometimes adds odd min-widths */
.elementor-widget-html iframe{ min-width:0 !important; }

/* Mobile: give the card a bit more height room automatically (handled by JS too) */
@media (max-width:768px){
  .kk-fb-card{ padding:12px 12px 16px; }
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .kk-fb-card{
    background: color-mix(in oklab, var(--kk-navy, #0A3A5E) 18%, #000);
    border-color: color-mix(in oklab, #fff 12%, transparent);
    box-shadow: 0 10px 28px rgba(0,0,0,.55);
  }
  .kk-fb-title{ color: var(--kk-blue-100, #DFF6FD) !important; }
  .kk-fb-frame{
    background: color-mix(in oklab, #111 80%, #fff 20%);
    border-color: color-mix(in oklab, #fff 10%, transparent);
  }
}/* End custom CSS */
/* Start custom CSS for facebook-page, class: .elementor-element-78dbb73 *//* Center and prevent clipping */
.hfn-fb-wrap { max-width:500px; margin:0 auto; }

/* Make the inner iframe use the full 500px */
.hfn-fb-wrap .fb-page,
.hfn-fb-wrap .fb-page > span,
.hfn-fb-wrap .fb-page iframe,
.elementor-widget-facebook-page iframe {
  width:100% !important;
}

/* If your parent container is clipping */
.hfn-fb-wrap,
.hfn-fb-wrap * { overflow: visible !important; }
.elementor-widget-facebook-page .fb-page { max-width:500px !important; width:500px !important; }
/* Desktop/tablet: same as before */
@media (min-width:641px){
  .hfn-fb-wrap{ max-width:500px; margin:0 auto; }
  .elementor-widget-facebook-page .fb-page{ width:500px !important; max-width:500px !important; }
}

/* Mobile: scale the 500px iframe to the width you want */
@media (max-width:640px){
  .hfn-fb-wrap{
    --base: 500;        /* plugin’s native width */
    --target: 360;      /* ← desired mobile width in px (try 360) */
    --scale: calc(var(--target) / var(--base));
    display:flex; justify-content:center; overflow:hidden;
  }

  .hfn-fb-wrap .fb-page{
    width:400px !important;
    transform-origin: top center !important;
    transform: scale(var(--scale)) !important;
  }
  .hfn-fb-wrap .fb-page > span,
  .hfn-fb-wrap .fb-page iframe{ width:500px !important; }
}/* End custom CSS */