/*
 * Paperish brand shim for the v16-native website.
 * ------------------------------------------------
 * The v11 pages were built on the Bizople "theme_ulike" theme, which is NOT
 * ported to v16 (decision: rebuild on the native theme). The page HTML still
 * uses that theme's utility/brand classes (text-alpha, mtNN, advs-box, ...).
 * This shim re-defines ONLY the classes the ported pages actually use, so the
 * content renders with the Paperish look (green brand colour, spacing, simple
 * component layouts) WITHOUT dragging in the 145 KB BS3 theme stylesheet that
 * would fight Bootstrap 5.
 *
 * Brand green = rgb(57,123,33) = #397B21 (taken verbatim from the v11 inline
 * styles). The "beta" (secondary) colour is an approximation — tweak freely.
 */

:root {
  --paperish-alpha: #397b21;   /* primary  – brand green            */
  --paperish-alpha-d: #2c5f19; /* darker green for hovers           */
  --paperish-beta: #b07d4b;    /* secondary – kraft brown (approx.) */
}

/* ---- brand colours ---- */
.text-alpha        { color: var(--paperish-alpha) !important; }
.text-beta         { color: var(--paperish-beta) !important; }
.bg-alpha          { background-color: var(--paperish-alpha) !important; }
.bg-beta           { background-color: var(--paperish-beta) !important; }
.text-black        { color: #000 !important; }
.text-white,
.white             { color: #fff !important; }
.bg-white          { background-color: #fff !important; }
.bg-white-75       { background-color: rgba(255,255,255,.75) !important; padding: 0 .15em; }
.bg-gray-light     { background-color: #777 !important; }

/* ---- buttons ---- */
.btn-beta          { background-color: var(--paperish-beta); border-color: var(--paperish-beta); color: #fff; }
.btn-beta:hover    { background-color: #96683b; border-color: #96683b; color: #fff; }
/* Paperish primary buttons were green; align btn-primary with the brand. */
.btn-primary       { background-color: var(--paperish-alpha); border-color: var(--paperish-alpha); }
.btn-primary:hover,
.btn-primary:focus { background-color: var(--paperish-alpha-d); border-color: var(--paperish-alpha-d); }
.circle-button     { border-radius: 2rem !important; padding: .5rem 1.75rem !important; }

/* ---- theme spacing scale (values were px in the theme) ---- */
.mt0{margin-top:0!important}      .mb0{margin-bottom:0!important}
.mt4{margin-top:4px!important}    .mb4{margin-bottom:4px!important}
.mt8{margin-top:8px!important}    .mb8{margin-bottom:8px!important}
.mt16{margin-top:16px!important}  .mb16{margin-bottom:16px!important}
.mt24{margin-top:24px!important}  .mb24{margin-bottom:24px!important}
.mt32{margin-top:32px!important}  .mb32{margin-bottom:32px!important}
.mt40{margin-top:40px!important}  .mb40{margin-bottom:40px!important}
.mt48{margin-top:48px!important}  .mb48{margin-bottom:48px!important}
.mt64{margin-top:64px!important}  .mb64{margin-bottom:64px!important}
.mt80{margin-top:80px!important}  .mb80{margin-bottom:80px!important}
.mt92{margin-top:92px!important}  .mb92{margin-bottom:92px!important}

/* ---- background-image helpers ---- */
.oe_img_bg,
.section-bg-image  { background-size: cover; background-repeat: no-repeat; }
.section-bg-image  { padding: 3rem 0; }
.bg-top            { background-position: top center; }
.bg-bottom         { background-position: bottom center; }
.banner-main       { padding: 4rem 0; }

/* ---- hero carousel (s_banner) ---- */
.s_banner                       { position: relative; }
.s_banner .carousel-item        { background-size: cover; background-position: center; min-height: 400px; }
.s_banner .carousel-content     { padding: 2rem 1rem; }
.s_banner .carousel-content h2,
.s_banner .carousel-content h4  { text-shadow: 0 1px 3px rgba(0,0,0,.25); }

/* ---- "advantage" product boxes ---- */
.advs-box          { text-align: center; }
.advs-box img      { margin: 0 auto; max-width: 100%; height: auto; }
.advs-box-top-icon { padding: 0 .5rem; }

/* ---- conversation-with-image section (green-way) ---- */
.vertical-row      { align-items: center; }

/* ---- "pins" transform section ---- */
.section-pins      { position: relative; text-align: center; }
.section-pins img  { max-width: 100%; height: auto; }
.box-pin           { display: inline-block; margin: 1rem; vertical-align: middle; }
.box-pin-right     { text-align: right; }

/* ---- newsletter block ---- */
.s_newsletter_two  { padding: 3rem 0; }
.s_newsletter_two .form-control { background-color: rgba(255,255,255,.15) !important; color: #fff; }

/* ---- misc theme utilities ---- */
hr.space           { border: 0; margin: 0; height: 1.5rem; }
hr.space.m         { height: 2.5rem; }
hr.s.space         { height: 1rem; }
.content           { position: relative; z-index: 1; }

/* ---- simple pulse animation used on a product image ---- */
.pulse-infinite    { animation: paperish-pulse 2.2s ease-in-out infinite; }
@keyframes paperish-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }

/* =========================================================================
   Content-page banner snippets (Bizople s_*_banner_one).  These carried an
   inline `height: NNNpx` and theme-only framing/transform on their image, so
   without the theme they leave a tall empty band and a misplaced image. Make
   them flow naturally: flexible height, vertically-centred two columns, and a
   plain responsive image.
   ========================================================================= */
.s_about_banner_one,
.s_service_banner_one {
  height: auto !important;          /* beat the inline fixed height           */
  min-height: 320px;
  padding: 2.5rem 0;
  overflow: visible !important;     /* inline style set overflow:hidden       */
  display: flex;
  align-items: center;
}
.s_about_banner_one > .container,
.s_service_banner_one > .container { width: 100%; }
.s_about_banner_one .vertical-row,
.s_service_banner_one .vertical-row { display: flex; flex-wrap: wrap; align-items: center; }
/* the theme applied a scale/translate transform to frame the photo; neutralise
   it so the image sits normally and never overflows its column */
.s_about_banner_one img,
.s_service_banner_one img {
  transform: none !important;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.title-base { text-align: left; }
.title-base hr { max-width: 60px; margin: 0 0 1rem; border-top: 2px solid var(--paperish-alpha); opacity: 1; }

/* generic: any section with a big inline pixel height that isn't a real hero
   background — let content set the height on narrow screens */
@media (max-width: 991px) {
  section[style*="height:"] { height: auto !important; }
  .banner-main, .section-bg-image { padding: 2.5rem 0; }
}

/* two-column image/text & three-column product blocks: even spacing + centring */
.s_three_columns .row,
.s_image_text .row,
.s_text_image .row { align-items: center; }
.s_three_columns img,
.s_image_text img,
.s_text_image img { max-width: 100%; height: auto; }

/* headings default to the brand green unless the inline <font> overrides it */
.s_title h1, .s_title h2 { color: var(--paperish-alpha); }

/* quotes / conversation blocks: readable text over any leftover bg image */
.s_conversation_with_img .content,
.s_quote_with_image .content { background: rgba(255,255,255,.85); border-radius: 8px; padding: 1.5rem; }

/* newsletter subscribe: make the disabled demo button look intentional */
.s_newsletter_two .btn, .s_subscribe .btn { pointer-events: auto; }
.s_newsletter_two .form-control::placeholder { color: rgba(255,255,255,.7); }