/* ============================================================================
 *  gf-blocks.css — look of the content blocks the admin adds from the editor
 *  (heading, paragraph, picture, list, cards). Loaded on every page, because
 *  these blocks are normal page content that visitors see.
 * ========================================================================== */

.gf-block {
  max-width: 1200px;
  margin: 56px auto;
  padding: 0 24px;
  color: #3b3b3b;
}

.gf-block__heading {
  margin: 0 0 16px;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.25;
  font-weight: 700;
  color: #b5179e;
}

.gf-block__text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.8;
  color: #555;
}

.gf-block__list {
  margin: 0;
  padding-left: 1.25em;
  font-size: 1.02rem;
  line-height: 1.9;
  color: #555;
}

.gf-block__list li {
  margin-bottom: 4px;
}

.gf-block__list li::marker {
  color: #b5179e;
}

.gf-block--image {
  max-width: 1100px;
  display: flex;
  justify-content: center;
}

.gf-block__img {
  display: block;
  max-width: 100%;
  max-height: 640px;
  width: auto;
  height: auto;
  border-radius: 18px;
}

.gf-block__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}

.gf-block__card {
  background: #ffffff;
  border: 1px solid #f2e6f7;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(26, 37, 90, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gf-block__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(181, 23, 158, 0.14);
}

.gf-block__card-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gf-block__card-body {
  padding: 18px 20px 22px;
}

.gf-block__card-title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 600;
  color: #781f91;
}

.gf-block__card-text {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.65;
  color: #666;
}

@media (max-width: 600px) {
  .gf-block {
    margin: 40px auto;
    padding: 0 18px;
  }

  .gf-block__cards {
    gap: 18px;
  }
}

/* A drop-down on one of the two right-most menu items opens towards the left,
   so its list always stays inside the screen (desktop only; on a phone the
   list sits inside the menu drawer). */
@media (min-width: 1025px) {
  .nav-links > li:nth-last-child(-n + 2) > .dropdown-menu {
    left: auto;
    right: 0;
  }
}

/* Eight menu items (with Blog) and the "Let's Talk" button stay on one line on
   narrow laptops: a little less space between the items, and the button never
   breaks into two lines. Wider screens keep the normal spacing. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .navbar .nav-links {
    gap: 20px;
  }

  .navbar .nav-cta {
    white-space: nowrap;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ============================================================================
   "From our blog" — the posts a product page shows above its footer.
   The newest post is on top, the older ones under it (the blog makes the list).
   Made by the blog (admin-api/_blog.php), never edited on the page itself.
   The picture always keeps its 16:9 shape: its box follows the picture,
   never the height of the text.
   Phone ≤ 640px, tablet 641–1024px, laptop ≥ 1025px; side by side from 861px.
   ============================================================================ */
.gf-product-blog,
.gf-product-blog *,
.gf-product-blog *::before,
.gf-product-blog *::after {
  box-sizing: border-box;
}

.gf-product-blog {
  display: block;
  margin: 0;
  padding: clamp(40px, 6vw, 72px) 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fbf6fc 100%);
  font-family: "Poppins", "Inter", sans-serif;
  color: #222831;
}

.gf-product-blog__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.gf-product-blog .gf-product-blog__tag {
  display: flex;
  justify-content: center;
  margin: 0 0 12px;
  color: #d63384;
  font-size: 1rem;
  font-weight: 600;
}

.gf-product-blog__title {
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding: 0 4%;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  color: #222831;
}

.gf-product-blog__list {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.gf-product-blog__card {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid #f3c9dd;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(126, 11, 158, 0.1);
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gf-product-blog__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(126, 11, 158, 0.16);
}

.gf-product-blog__media {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: #f6ecf8;
}

.gf-product-blog__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover; /* only a safety net: the picture is already 16:9 */
  transition: transform 0.5s ease;
}

.gf-product-blog__card:hover .gf-product-blog__img {
  transform: scale(1.03);
}

.gf-product-blog__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 4px clamp(4px, 1.4vw, 16px) 4px 0;
}

.gf-product-blog__chip {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fbe7f1;
  color: #b5179e;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
}

.gf-product-blog__meta {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  color: #6b7280;
}

.gf-product-blog__post-title {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.2rem, 0.9rem + 1vw, 1.6rem);
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gf-product-blog__post-title a {
  color: #222831;
  text-decoration: none;
}

.gf-product-blog__post-title a:hover {
  color: #7e0b9e;
}

.gf-product-blog__excerpt {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.97rem;
  line-height: 1.65;
  color: #5f6b7a;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gf-product-blog__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 4px;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7e0b9e, #d63384);
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(214, 51, 132, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gf-product-blog__more:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(214, 51, 132, 0.32);
  color: #ffffff;
}

.gf-product-blog__all {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.gf-product-blog__all a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  color: #7e0b9e;
  text-decoration: none;
}

.gf-product-blog__all a:hover {
  text-decoration: underline;
}

.gf-product-blog a:focus-visible {
  outline: 3px solid #7e0b9e;
  outline-offset: 3px;
  border-radius: 10px;
}

.gf-product-blog__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* below 861px: stacked, the picture on top at 16:9 */
@media (max-width: 860px) {
  .gf-product-blog__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .gf-product-blog__body {
    padding: 0 6px 6px;
  }
}

@media (max-width: 640px) {
  .gf-product-blog {
    padding-left: 16px;
    padding-right: 16px;
  }

  .gf-product-blog__card {
    border-radius: 18px;
  }

  .gf-product-blog__media {
    border-radius: 12px;
  }

  .gf-product-blog__more {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gf-product-blog__card,
  .gf-product-blog__img,
  .gf-product-blog__more {
    transition: none;
  }
}

/* Product pages (pregnancy, fertility, vitamin, muscle, acidity): the picture beside
   the introduction is big — it fills its whole column (it used to stop at 380px),
   and picture and text get half of a wider row each (about 556px on a laptop).
   When the text goes below it (tablets, phones) the picture is at most 560px wide. */
.detail-banner > img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 901px) {
  .detail-banner {
    max-width: 1280px;
    padding: 0 5%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .detail-banner > img {
    max-width: 560px;
  }
}

/* ============================================================================
   PHONE & TOUCH FIXES — shared by every page (this file is linked on all of
   them, last, so these rules win over each page's own stylesheet).

   1. THE PAGE WOULD NOT SCROLL (a swipe on a phone; also the mouse wheel on
      pages where the smooth-scroll library is not running, such as the blog).
      Several stylesheets give BOTH <html> and <body> `overflow-x: hidden` as
      a horizontal-overflow safety net. Any non-visible overflow turns <body>
      into a scroll container of its own. <body> cannot actually scroll (it is
      exactly as tall as its content), and `overscroll-behavior: none` on it
      (style.css) stops the gesture from being handed on to the page, so
      nothing moved. Now <html> alone clips the sides, and <body> stops being a
      scroll container (`visible`, or `clip` where the browser has it) and no
      longer blocks the hand-over. While the phone menu is open the more
      specific `html.nav-scroll-locked` rule still freezes the page.

   2. THE BLUE/GREY FLASH WHEN TAPPING A LINK OR BUTTON on a phone is the
      browser's default tap highlight; it is switched off, and
      `touch-action: manipulation` removes the delay on double-tap-to-zoom
      (pinch-zoom still works).
   ============================================================================ */
html {
  overflow-x: hidden !important;
}
body {
  overflow: visible !important;
  overscroll-behavior: auto !important;
}
@supports (overflow-x: clip) {
  body {
    overflow-x: clip !important;
  }
}

a,
button,
[role="button"],
summary,
label,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 3. THE BLOG AND NEW PAGES DID NOT FREEZE THE PAGE BEHIND THE OPEN PHONE MENU
      (that rule lives in each of the 17 original pages' own responsive file
      and was never copied to responsive/site-common.css, which the blog and
      pages made with "New page" use). Same rule, same 768px ceiling as
      script.js/nav-enhance.js, so every page now behaves alike. */
@media (max-width: 768px) {
  html.nav-scroll-locked,
  html.nav-scroll-locked body {
    overflow: hidden !important;
  }
  .nav-links {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* 4. "LET'S TALK" INSIDE THE PHONE/TABLET MENU WAS DARK GREY ON PURPLE.
      The menu's general link colour (`.nav-links a`, grey) was also reaching
      the button once it is moved into the menu, so its label was hard to read.
      It is white like the desktop button again. */
.nav-links .nav-cta,
.nav-links .nav-cta:hover,
.nav-links .nav-cta:focus {
  color: #ffffff !important;
  font-weight: 600;
}