/* ==========================================================================
   oo-casestudy.css — reusable, Elementor-free styling for ownCloud.online
   customer case-study pages (Gutenberg core blocks).
   All rules are scoped under .oo-casestudy so the file is safe to enqueue
   site-wide and can be reused on multiple pages.
   Palette: light #F8F8F8 · navy #464D6A · slate #547A9E · teal #00E4BD
            ink #262B45 · body #3f4254
   ========================================================================== */

.oo-casestudy {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #464D6A;
  line-height: 1.7;
  overflow-x: clip;
}

/* Hide the theme's page title on case-study pages (Elementor pages were
   full-width with the title hidden — reproduce that for any .oo-casestudy page). */
body:has(.oo-casestudy) .page-header { display: none; }

/* hello-elementor's default page template caps .site-main at a content width
   (~1140px); Elementor pages bypassed it. Case-study pages need .site-main
   full-width so the colour/image bands bleed edge-to-edge (and so the
   bottom-left silos caption isn't clipped by the content gutter). */
body:has(.oo-casestudy) .site-main {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ---- Bands (full-bleed colour sections) -------------------------------- */
.oo-casestudy .oo-band {
  width: 100%;
  padding: 64px 20px; /* 20px gutter matches the site header container */
  box-sizing: border-box;
}
/* Full-bleed fallback when the page is not on a full-width template */
.oo-casestudy .oo-band.alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}
.oo-casestudy .oo-band--banner { background-color: #F8F8F8; }
.oo-casestudy .oo-band--light  { background-color: #FFFFFF; }
.oo-casestudy .oo-band--navy   { background-color: #464D6A; color: #fff; padding: 56px 20px 28px; }
.oo-casestudy .oo-band--slate  { background-color: #547A9E; color: #fff; padding: 28px 20px 56px; }
.oo-casestudy .oo-band--cta    { background-color: #00E4BD; color: #fff; padding: 72px 20px; }

/* ---- Inner width wrappers ---------------------------------------------- */
/* Content aligned to the site header's 1400px container width. */
.oo-casestudy .oo-inner {
  max-width: 1400px;
  margin-inline: auto;
}
.oo-casestudy .oo-inner--narrow { max-width: 1400px; }
.oo-casestudy .oo-inner--cta    { max-width: 1400px; text-align: center; }

/* ---- Typography -------------------------------------------------------- */
/* font-weight uses !important to beat the child theme's id rule
   (main#content h2..h6 { font-weight: 300 }). */
.oo-casestudy h1.wp-block-heading,
.oo-casestudy h2.wp-block-heading {
  font-size: 32px;
  line-height: 1.25;
  font-weight: 500 !important;
  color: #464D6A;
  margin: 0 0 20px;
}
.oo-casestudy .oo-band--navy h1.wp-block-heading,
.oo-casestudy .oo-band--navy h2.wp-block-heading,
.oo-casestudy .oo-band--slate h2.wp-block-heading { color: #fff; font-weight: 300 !important; }
.oo-casestudy p { margin: 0 0 18px; font-size: 16px; }
.oo-casestudy a { color: #00aa8c; }

/* ---- Banner ------------------------------------------------------------ */
.oo-casestudy .oo-banner-cols { gap: 32px; align-items: center; }
.oo-casestudy .oo-coo-img img {
  border-radius: 50%;
  width: 220px;
  height: 220px;
  object-fit: cover;
  margin-left: auto;
  display: block;
}

/* ---- Quotes (override core wp-block-quote chrome) ---------------------- */
.oo-casestudy .oo-quote {
  border: 0;
  margin: 0;
  padding: 0;
  font-style: italic;
}
.oo-casestudy .oo-quote p { font-style: italic; }
.oo-casestudy .oo-quote cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  margin-top: 16px;
  opacity: .9;
}

/* banner quote — large teal display (preserve original colour) */
.oo-casestudy .oo-quote--banner p {
  font-size: 39px;
  line-height: 1.3;
  font-weight: 100;
  color: #00E4BD;
  margin: 0;
}
.oo-casestudy .oo-quote--banner cite {
  color: #464D6A;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 20px;
}

/* inset quote inside light text section */
.oo-casestudy .oo-quote--inset {
  border-left: 4px solid #00E4BD;
  padding: 6px 0 6px 26px;
  margin: 28px 0;
}
.oo-casestudy .oo-quote--inset p {
  font-size: 32px;
  line-height: 1.4;
  color: #464D6A;
  margin: 0;
}

/* spotlight quote on slate band */
.oo-casestudy .oo-quote--spotlight {
  border-left: 4px solid #ffffff;
  padding-left: 26px;
}
.oo-casestudy .oo-quote--spotlight p { font-size: 24px; line-height: 1.5; color: #fff; }
.oo-casestudy .oo-quote--spotlight cite { color: #fff; }

/* CTA quote — centred clean */
.oo-casestudy .oo-quote--cta { text-align: center; margin-bottom: 8px; }
.oo-casestudy .oo-quote--cta p { font-size: 32px; line-height: 1.4; color: #fff; margin: 0; }
.oo-casestudy .oo-quote--cta cite { color: #fff; }

/* ---- Spotlight columns ------------------------------------------------- */
.oo-casestudy .oo-spotlight-cols { gap: 32px; align-items: center; }
.oo-casestudy .oo-sharing-img img { max-width: 240px; height: auto; margin: 0 auto; display: block; }

/* ---- Silos hero -------------------------------------------------------- */
.oo-casestudy .oo-band--silos {
  position: relative;
  min-height: 620px;
  padding: 0;
  background-image: url("https://oosandbox.bw.tech/wp-content/uploads/2023/08/ownCloud-online-nanolike-Illustration_silos_iot.jpg");
  background-size: cover;
  background-position: center;
}
.oo-casestudy .oo-silos-caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  max-width: 550px;
  margin: 0;
  padding: 15px;
  background: #00E4BD;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

/* ---- Entrance animations (Elementor-style, triggered on scroll) -------- */
/* Only hidden once JS has flagged the page (.oo-js) so a JS failure never
   leaves content invisible; disabled entirely under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .oo-casestudy.oo-js .oo-animate { opacity: 0; }
  .oo-casestudy.oo-js .oo-animate.oo-in { opacity: 1; animation: .9s ease both; }
  .oo-casestudy .oo-animate--fadeleft.oo-in { animation-name: ooFadeInLeft; }
  .oo-casestudy .oo-animate--fadeup.oo-in   { animation-name: ooFadeInUp; }
  .oo-casestudy .oo-animate--fade.oo-in      { animation-name: ooFadeIn; }
}
@keyframes ooFadeInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes ooFadeInUp   { from { opacity: 0; transform: translateY(40px); }  to { opacity: 1; transform: none; } }
@keyframes ooFadeIn     { from { opacity: 0; } to { opacity: 1; } }

/* ---- CTA heading + button --------------------------------------------- */
.oo-casestudy .oo-cta-heading {
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  margin: 8px 0 28px;
}
.oo-casestudy .oo-cta-btn .wp-block-button__link {
  background-color: #fff;
  color: #262B45;
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: 4px;
  padding: 14px 38px;
}
.oo-casestudy .oo-cta-btn .wp-block-button__link:hover { background-color: #262B45; color: #fff; }

/* ---- Footer card ------------------------------------------------------- */
.oo-casestudy .oo-footercard {
  background-color: #F8F8F8;
  border-radius: 6px;
  padding: 32px 36px;
}
.oo-casestudy .oo-footercard .oo-nanolike-logo { margin: 0 24px 10px 0; }
.oo-casestudy .oo-footercard .oo-nanolike-logo img { max-width: 280px; height: auto; }
.oo-casestudy .oo-footercard p { font-size: 14px; line-height: 1.7; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 767px) {
  .oo-casestudy .oo-band { padding: 40px 20px; }
  .oo-casestudy .oo-quote--banner p { font-size: 28px; }
  .oo-casestudy h2.wp-block-heading { font-size: 26px; }
  .oo-casestudy .oo-coo-img img { margin: 0 auto; }
  .oo-casestudy .oo-band--silos { min-height: 380px; }
  .oo-casestudy .oo-silos-caption { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}