/* Blue Ribbon Embroidery — responsive refinements */

/* never allow a stray wide element to create sideways scrolling */
html, body { overflow-x: hidden; }

/* --- Quote form --------------------------------------------------- */
.fluentform .ff-el-input--content input,
.fluentform .ff-el-input--content textarea,
.fluentform .ff-el-form-control {
  background: #F6F2E7;
  border: 1.5px solid rgba(22,35,63,0.14);
  border-radius: 10px;
  padding: 13px 15px;
  font-family: 'Work Sans', sans-serif;
  /* 16px minimum stops iOS Safari zooming in when a field is focused */
  font-size: 16px;
  color: #1C1B18;
}
.fluentform .ff-el-form-control:focus {
  background: #FFFFFF;
  border-color: #B3372C;
  outline: none;
  box-shadow: none;
}
.fluentform .ff-el-input--label label {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: #16233F;
}
.fluentform .ff-btn-submit { width: 100%; min-height: 50px; }

/* comfortable spacing between stacked fields on phones */
@media (max-width: 767px) {
  .fluentform .ff-t-cell { margin-bottom: 4px; }
  .fluentform .ff-el-group { margin-bottom: 16px; }
}

/* --- Footer ------------------------------------------------------- */
@media (max-width: 767px) {
  .ast-builder-footer-grid-columns [data-section*="footer-widget"] > div > div {
    gap: 28px !important;
  }
  /* generous tap targets for footer links */
  .site-footer a { display: inline-block; padding: 4px 0; }
}

/* --- Off-canvas mobile menu -------------------------------------- */
.ast-mobile-popup-drawer .ast-mobile-popup-inner { background-color: #16233F; }
.ast-mobile-popup-drawer .menu-item > a { min-height: 48px; display: flex; align-items: center; }

/* --- Sticky header shouldn't eat the screen on phones ------------- */
@media (max-width: 767px) {
  .ast-primary-header-bar { padding-top: 8px; padding-bottom: 8px; }
}
/* --- Contact info card: keep long values inside the card --- */
.page-id-29 .elementor-widget-text-editor a{ word-break:break-word; overflow-wrap:anywhere; }
.page-id-29 .elementor-widget-text-editor p{ overflow-wrap:anywhere; }
@media (max-width:767px){
  .page-id-29 .elementor-widget-text-editor{ max-width:100%; }
}



/* --- Headline balancing ------------------------------------------- */
/* spreads a heading evenly across its lines instead of leaving one
   or two stray words on the last line */
.elementor-widget-heading .elementor-heading-title{ text-wrap:balance; }
.elementor-widget-text-editor p{ text-wrap:pretty; }
/* --- end headline balancing --- */



/* --- Trust chips ---------------------------------------------------
   Elementor defaults a container to full width, which squashed these
   pills into narrow columns. Let each size to its own text. */
.elementor-element-0345db9{ flex-wrap:wrap; justify-content:center; }
.elementor-element-0345db9 > .e-con{
  width:auto !important; flex:0 0 auto !important; max-width:100%;
}
/* --- end trust chips --- */



/* --- Nav hover ------------------------------------------------------
   Links grow slightly on hover. transform is used rather than font-size
   so the row never reflows and the other links stay put. */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link{
  display:inline-block;
  transform-origin:center center;
  transition:transform .18s ease, color .18s ease;
  will-change:transform;
}
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover,
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:focus-visible{
  transform:scale(1.14);
}
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > .menu-link{
  transform:scale(1.06);
}
@media (prefers-reduced-motion:reduce){
  .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link{ transition:none; }
  .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover{ transform:none; text-decoration:underline; }
}
/* --- end nav hover --- */







/* --- Accordion (FAQ) -----------------------------------------------
   Question on the left, toggle icon on the right. */
.elementor-accordion .elementor-tab-title{
  display:flex; align-items:center; gap:16px;
  justify-content:flex-start; min-height:52px;
}
.elementor-accordion .elementor-tab-title .elementor-accordion-title{
  flex:1 1 auto; text-align:left; order:1;
}
.elementor-accordion .elementor-tab-title .elementor-accordion-icon{
  order:2; margin-left:auto; float:none; width:auto; text-align:right;
}
@media (max-width:767px){
  .elementor-accordion .elementor-tab-title{ font-size:15px; line-height:1.35; }
}
/* --- end accordion --- */

/* --- Mobile menu drawer --------------------------------------------
   Flag layout: star field above, red block of uniform rows split by
   thick white stripes, solid navy below. */
.ast-mobile-popup-drawer .ast-mobile-popup-inner{
  background-color:#16233F !important;
  background-image:none !important;
  display:flex; flex-direction:column;
}
.ast-mobile-popup-drawer .ast-mobile-popup-header{
  flex:1 1 0; align-items:flex-start;
  background-color:transparent !important;
  background-image:url('https://blueribbonembroidery.com/wp-content/uploads/bre-stars.svg') !important;
  background-repeat:repeat !important;
  background-size:130px 130px !important;
  background-position:top left !important;
}
/* no bottom spacer: the block sits flush to the bottom, stars fill above */

/* one red block holding every row, tabs and Quote alike */
.ast-mobile-popup-drawer .ast-mobile-popup-content{
  flex:0 0 auto;
  background-color:#B3372C !important;
  background-image:none !important;
  padding:20px 0 !important;
}
.ast-mobile-popup-content .ast-builder-menu-mobile{ background-color:transparent; padding:0; }

/* rows */
.ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu .menu-item{
  position:relative; padding-bottom:54px;
}
.ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link{
  background-color:#C4564A; color:#FFFFFF !important;
  border-radius:10px; margin:0 16px;
  padding:18px 20px;
  transition:background-color .15s ease;
}
/* thick white stripe after every row, including the last tab so it also
   separates Services from Quote */
.ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu .menu-item::after{
  content:''; position:absolute; left:0; right:0; bottom:7px;
  height:40px; background-color:#FFFFFF;
}
.ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu .menu-item.current-menu-item > .menu-link,
.ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu .menu-item.current_page_item > .menu-link,
.ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link:hover,
.ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link:focus{
  background-color:#B3372C; color:#FFFFFF !important;
}

/* Quote: same bar as every other row (Astra hides the duplicate .menu-link) */
.ast-mobile-popup-content .ast-header-button-1{ padding:0 !important; display:block !important; width:100%; }
.ast-mobile-popup-content .ast-header-button-1 .ast-builder-button-wrap,
.ast-mobile-popup-content .ast-header-button-1 .ast-custom-button-link{ display:block !important; width:100%; }
.ast-mobile-popup-content .ast-header-button-1 .ast-custom-button{
  display:block !important;
  background:#C4564A !important;
  color:#FFFFFF !important;
  border-radius:10px !important;
  margin:0 16px !important;
  padding:18px 20px !important;
  font-family:'Work Sans',sans-serif !important;
  font-weight:700 !important;
  font-size:17px !important;
  line-height:1.2 !important;
  text-align:left !important;
  box-shadow:none !important;
  border:0 !important;
  transition:background .15s ease;
}
.ast-mobile-popup-content .ast-header-button-1 .ast-custom-button-link:hover .ast-custom-button,
.ast-mobile-popup-content .ast-header-button-1 .ast-custom-button-link:focus .ast-custom-button{
  background:#B3372C !important;
}
.ast-mobile-popup-drawer .menu-toggle-close{ color:#FFFFFF; }
.ast-mobile-popup-drawer .menu-toggle-close svg{ fill:#FFFFFF; }
/* --- end mobile menu rows --- */

/* --- Quote row states -----------------------------------------------
   Contact is no longer in the menu, so nothing flags it as the current
   page. Mark the Quote row instead, and give every row a pressed state
   since touch devices never hover. */
body.page-id-29 .ast-mobile-popup-content .ast-header-button-1 .ast-custom-button{
  background:#B3372C !important;
}
.ast-mobile-popup-content .ast-header-button-1 .ast-custom-button-link:active .ast-custom-button,
.ast-mobile-popup-content .ast-header-button-1 .ast-custom-button-link:focus .ast-custom-button,
.ast-mobile-popup-content .ast-header-button-1 .ast-custom-button-link:focus-within .ast-custom-button{
  background:#B3372C !important;
}
.ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link:active{
  background-color:#B3372C;
}
/* keyboard focus stays visible on both */
.ast-mobile-popup-content .ast-header-button-1 .ast-custom-button-link:focus-visible .ast-custom-button,
.ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link:focus-visible{
  outline:3px solid #C69A3B; outline-offset:2px;
}
/* no grey tap flash on iOS \u2014 the colour change is the feedback */
.ast-mobile-popup-content .ast-header-button-1 .ast-custom-button-link,
.ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link{
  -webkit-tap-highlight-color:transparent;
}
/* --- end quote row states --- */

/* --- Stripe sizing --------------------------------------------------
   Stripes 40px (25% up from 32), and one closing the block under Quote.
   Geometry: 7px clear above each stripe, stripe, then the next row. */
.ast-mobile-popup-drawer .ast-mobile-popup-content{ padding:20px 0 0 !important; margin-top:auto; }

/* Quote row gets its own closing stripe, flush with the bottom of the red block */
.ast-mobile-popup-content .ast-header-button-1{
  position:relative !important;
  padding:0 0 47px !important;
}
.ast-mobile-popup-content .ast-header-button-1::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:40px; background-color:#FFFFFF;
}
/* --- end stripe sizing --- */

/* --- Card grids -----------------------------------------------------
   Give the headings and descriptions a common height on wide screens so
   the tick lists and links line up across a row instead of stair-stepping. */
@media (min-width:1025px){
  /* six service cards */
  .elementor-element-01c8b82 .elementor-widget-heading{ min-height:52px; }
  .elementor-element-01c8b82 .elementor-widget-text-editor{ min-height:76px; }
  /* four things we won't compromise on */
  .elementor-element-763c559 .elementor-widget-heading{ min-height:26px; }
}
@media (min-width:768px) and (max-width:1024px){
  .elementor-element-01c8b82 .elementor-widget-heading{ min-height:58px; }
  .elementor-element-01c8b82 .elementor-widget-text-editor{ min-height:100px; }
}
/* --- end card grids --- */

/* --- About page ------------------------------------------------------
   Small lift on the four cards so the page is not entirely static. */
.page-id-1 .elementor-element-763c559 > .e-con{
  transition:transform .18s ease, box-shadow .18s ease;
}
@media (min-width:1025px){
  .page-id-1 .elementor-element-763c559 > .e-con:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 44px -22px rgba(13,23,48,0.45);
  }
}
@media (prefers-reduced-motion:reduce){
  .page-id-1 .elementor-element-763c559 > .e-con{ transition:none; }
  .page-id-1 .elementor-element-763c559 > .e-con:hover{ transform:none; }
}
/* --- end about page --- */





/* --- Flag backdrop (single, continuous) ------------------------------
   ONE flag, pinned to the viewport, running behind the header and the
   whole page. The header must not paint its own copy or the two would
   be scaled differently and never line up. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:#F6F2E7;
  background-image:linear-gradient(rgba(246,242,231,0.55), rgba(246,242,231,0.55)), url('https://blueribbonembroidery.com/wp-content/uploads/bre-flag.svg');
  background-size:cover, auto 80vh;
  background-position:center center, center center;
  background-repeat:no-repeat, no-repeat;
}
/* everything between the backdrop and the content stays see-through */
html, body, #page, .site, #content, .site-content, .ast-container,
.ast-plain-container .site-content, .ast-separate-container,
.ast-plain-container, .entry-content, .ast-article-single,
#masthead, .ast-primary-header-bar, .ast-above-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar, .main-header-bar{
  background-color:transparent !important;
  background-image:none !important;
}
/* nav sits directly on the flag now, so give it a touch more weight */
.ast-builder-menu-1 .menu-item > .menu-link{ text-shadow:0 1px 0 rgba(246,242,231,0.55); }
/* --- end flag backdrop --- */

/* --- Corner radius (one scale everywhere) ----------------------------
   16px panels and cards, 14px media, 10px inputs, 999px pills. */
/* accordions: FAQ and the mobile services list */
.elementor-accordion .elementor-accordion-item{
  border-radius:16px;
  overflow:hidden;
  margin-bottom:12px;
}
.elementor-accordion .elementor-accordion-item:last-child{ margin-bottom:0; }
/* photo inside an accordion panel */
.bre-accordion-photo{ border-radius:14px !important; }
/* quote form fields */
.fluentform .ff-el-form-control,
.fluentform .ff-el-input--content input,
.fluentform .ff-el-input--content textarea{ border-radius:10px !important; }
.fluentform .ff-btn-submit{ border-radius:999px !important; }
/* media inside cards must clip to the card corners */
.e-con[class*='elementor-element'] > .e-con{ }
/* --- end corner radius --- */

/* --- Flag fill (desktop) ---------------------------------------------
   On wider screens the flag fills the viewport with no cream gaps.
   Anchored left so the canton and stars stay in frame while the crop
   is taken off the striped end instead. */
@media (min-width:1025px){
  body::before{
    background-size:cover, cover;
    background-position:center center, left center;
  }
}
/* --- end flag fill --- */