/* ==========================================================================
   GP and Me — legacy markup mapping
   Restyles the existing page.php output to the 2026 design without
   rewriting the PHP. Loaded after gpandme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page heroes — the b1 layout, in all its variants
   .top_section / .top_black / .top_gradient  → dark hero
   .top_section_img                            → dark hero over a photo
   .page_top / .procedures_section             → light hero
   .book_top                                   → booking hero
   -------------------------------------------------------------------------- */
.gm .top_section,
.gm .top_black,
.gm .top_gradient,
.gm .book_top{
  background:var(--gm-black);
  color:#fff;
  padding:72px 0 80px;
  text-align:center;
}
.gm .top_section_img{
  background:var(--gm-black) !important;
  background-image:none !important;
  color:#fff;
  padding:72px 0 80px;
  text-align:center;
}
.gm .top_section h1,
.gm .top_section_img h1,
.gm .book_top h1,
.gm .top_title{
  font-size:clamp(38px,5.6vw,62px);
  font-weight:600;
  letter-spacing:-0.04em;
  line-height:1.08;
  color:#fff;
  margin:0 0 20px;
}
.gm .top_section h2,
.gm .top_section_img h2,
.gm .book_top h2,
.gm .title_block.white,
.gm .top_section .section_text,
.gm .top_section_img .section_text{
  font-size:clamp(17px,1.9vw,20px);
  font-weight:400;
  line-height:1.55;
  color:#a1a1a6;
  max-width:58ch;
  margin:0 auto;
  letter-spacing:0;
}
.gm .top_section .section_text p,
.gm .top_section_img .section_text p{color:#a1a1a6;margin:0 0 14px}
.gm .top_section .btn,
.gm .top_section_img .btn,
.gm .book_top .btn{background:var(--gm-blue-dark);margin-top:26px}
.gm .top_gradient_logo{display:none}

/* Light hero used on procedures and some service pages */
.gm .page_top{
  background:var(--gm-grey-bg);
  padding:64px 0 72px;
  text-align:center;
}
.gm .page_top h1,
.gm .page_top .section_title{
  font-size:clamp(34px,5vw,52px);
  letter-spacing:-0.035em;
  margin:0 0 24px;
  color:var(--gm-ink);
}

/* --------------------------------------------------------------------------
   Homepage hero — superseded by front-page.php, hidden if it ever renders
   -------------------------------------------------------------------------- */
.gm .top_home{background:var(--gm-black);color:#fff;padding:64px 0;text-align:center}
.gm .top_home .top_bg{display:none}
.gm .top_home_logo img{margin:0 auto 28px}
.gm .top_home_triggers{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:900px;margin:0 auto 32px;
}
.gm .top_trigger_box{
  background:#111113;border:1px solid #262628;border-radius:18px;padding:24px;
}
.gm .top_trigger_icon img{height:38px;width:auto;margin:0 auto 14px;filter:brightness(0) invert(1)}
.gm .top_trigger_text{color:#c7c7cc;font-size:15px;margin:0}
.gm .top_home_buttons .btn{background:var(--gm-blue-dark)}

/* --------------------------------------------------------------------------
   Procedure / icon grids — pastel tiles, matching the homepage
   -------------------------------------------------------------------------- */
.gm .procedures_wrap{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:var(--gm-wrap);margin:44px auto 0;
}
.gm .procedure_item{
  border-radius:22px;padding:30px 28px;border:1px solid rgba(0,0,0,.05);
  background:linear-gradient(180deg,#DCEBFF 0%,#FFFFFF 100%);
  text-align:left;
}
.gm .procedure_item:nth-child(6n+2){background:linear-gradient(180deg,#D9F2EC 0%,#FFFFFF 100%)}
.gm .procedure_item:nth-child(6n+3){background:linear-gradient(180deg,#EBE4FB 0%,#FFFFFF 100%)}
.gm .procedure_item:nth-child(6n+4){background:linear-gradient(180deg,#FFE3E0 0%,#FFFFFF 100%)}
.gm .procedure_item:nth-child(6n+5){background:linear-gradient(180deg,#FFF0D9 0%,#FFFFFF 100%)}
.gm .procedure_item:nth-child(6n+6){background:linear-gradient(180deg,#E2F0D9 0%,#FFFFFF 100%)}
.gm .procedure_item_icon img{height:40px;width:auto;margin-bottom:16px}
.gm .procedure_item .text_block p{
  font-size:16px;font-weight:500;color:var(--gm-ink);line-height:1.45;margin:0;
}

/* --------------------------------------------------------------------------
   Section titles in body content
   -------------------------------------------------------------------------- */
.gm .section_title{
  font-size:clamp(30px,4.2vw,44px);
  font-weight:600;
  letter-spacing:-0.032em;
  line-height:1.12;
  color:var(--gm-ink);
  margin:0 0 22px;
}
.gm .section_title.white{color:#fff}
.gm .section_text{color:var(--gm-ink-2);font-size:17px;line-height:1.65}
.gm .section_text p{margin:0 0 18px}
.gm .title_block{font-size:21px;font-weight:600;letter-spacing:-0.02em;margin:0 0 14px}
.gm .title_block.white{color:#fff}

@media (max-width:900px){
  .gm .procedures_wrap,
  .gm .top_home_triggers{grid-template-columns:1fr}
  .gm .top_section,
  .gm .top_section_img,
  .gm .book_top{padding:56px 0 60px}
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.gm .container{
  max-width:var(--gm-wrap);
  margin:0 auto;
  padding:0 24px;
  width:100%;
}

.gm .main_content{padding:80px 0}
.gm .main_content + .main_content{padding-top:0}

/* Alternate section shading down the page */
.gm .main_content:nth-of-type(even){background:var(--gm-grey-bg)}

/* The old top line is replaced by the sticky utility bar */
.gm .top_line{display:none}

/* --------------------------------------------------------------------------
   Typography inside content
   -------------------------------------------------------------------------- */
.gm .main_content h1,
.gm .main_content h2,
.gm .main_content h3,
.gm .main_content h4,
.gm .section_title{
  font-weight:600;
  letter-spacing:-0.028em;
  line-height:1.12;
  color:var(--gm-ink);
}
.gm .main_content h1,
.gm .section_title{font-size:clamp(34px,5vw,52px);letter-spacing:-0.035em;margin:0 0 20px}
.gm .main_content h2{font-size:clamp(28px,3.6vw,40px);margin:44px 0 18px}
.gm .main_content h3{font-size:21px;margin:32px 0 12px}
.gm .main_content h4{font-size:17px;margin:26px 0 10px}

.gm .main_content p{
  color:var(--gm-ink-2);
  font-size:17px;
  line-height:1.65;
  margin:0 0 18px;
  max-width:74ch;
}
.gm .main_content p:last-child{margin-bottom:0}
.gm .main_content strong{color:var(--gm-ink);font-weight:600}
.gm .main_content a{color:var(--gm-blue)}
.gm .main_content a:hover{text-decoration:underline}

.gm .main_content ul{margin:0 0 20px;padding:0;list-style:none;max-width:74ch}
.gm .main_content ul li{
  position:relative;
  padding:6px 0 6px 20px;
  font-size:16px;
  color:var(--gm-ink-2);
  line-height:1.6;
}
.gm .main_content ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:15px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gm-blue);
}
.gm .main_content ol{margin:0 0 20px;padding-left:22px;max-width:74ch}
.gm .main_content ol li{font-size:16px;color:var(--gm-ink-2);padding:6px 0;line-height:1.6}

/* Text blocks used throughout the old templates */
.gm .text_block p{margin:0}
.gm .text_block p:empty{display:none}

/* --------------------------------------------------------------------------
   Price and comparison tables
   Old markup: .content_table > table > tr > td > .text_block > p
   Becomes clean rows: name left, price right, link underneath.
   -------------------------------------------------------------------------- */
.gm .content_table{max-width:860px;margin:0 auto}
.gm .content_table table{
  width:100%;
  border-collapse:collapse;
  border:0;
}
.gm .content_table tr{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:20px 0;
  border-bottom:1px solid var(--gm-line-soft);
}
.gm .content_table tr:first-child{border-top:1px solid var(--gm-line)}
.gm .content_table td{
  border:0;
  padding:0;
  background:none;
}
/* first cell — the item name */
.gm .content_table td:first-child{flex:1 1 auto}
.gm .content_table td:first-child p{
  font-size:17px;
  font-weight:500;
  color:var(--gm-ink);
}
.gm .content_table td:first-child strong{font-weight:600}
/* second cell — the price */
.gm .content_table td:nth-child(2){
  flex:0 0 auto;
  text-align:right;
  max-width:280px;
}
.gm .content_table td:nth-child(2) p{
  font-size:21px;
  font-weight:600;
  color:var(--gm-ink);
  white-space:nowrap;
}
/* long descriptive "prices" like "not included in the consultation fee" */
.gm .content_table td:nth-child(2) p{white-space:normal}
/* third cell — the link */
.gm .content_table td:nth-child(3){flex:0 0 auto;text-align:right}
.gm .content_table td:nth-child(3) p{font-size:15px}
.gm .content_table td:nth-child(3) a{color:var(--gm-blue)}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.gm .btn,
.gm a.btn,
.gm .main_content .btn{
  display:inline-block;
  background:var(--gm-blue);
  color:#fff;
  font-size:16px;
  font-weight:500;
  padding:13px 28px;
  border-radius:100px;
  border:1px solid transparent;
  text-decoration:none;
  transition:background .2s;
}
.gm .btn:hover,
.gm a.btn:hover{background:var(--gm-blue-hover);color:#fff;text-decoration:none}
.gm .btn_big{padding:15px 34px;font-size:17px}

/* Centre the button that closes most sections */
.gm .main_content .container > .btn,
.gm .main_content .container > p > .btn{display:block;width:fit-content;margin:40px auto 0}

/* --------------------------------------------------------------------------
   Accordions
   -------------------------------------------------------------------------- */
.gm .accordion_section{max-width:860px;margin:0 auto}
.gm .accordion_item{
  border-bottom:1px solid var(--gm-line);
}
.gm .accordion_title{
  padding:22px 0;
  font-size:17px;
  font-weight:500;
  color:var(--gm-ink);
  cursor:pointer;
}
.gm .accordion_content{padding-bottom:22px}

/* --------------------------------------------------------------------------
   Trustpilot / ratings strip
   -------------------------------------------------------------------------- */
.gm .rated_section{
  padding:30px 0;
  text-align:center;
  background:var(--gm-grey-bg);
}
.gm .rated_stars img{display:inline-block}
.gm .rated_text{color:var(--gm-ink-2);font-size:15px}

/* --------------------------------------------------------------------------
   Images
   -------------------------------------------------------------------------- */
.gm .main_content img{border-radius:16px;height:auto}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .gm .main_content{padding:56px 0}

  .gm .content_table tr{
    display:block;
    padding:18px 0;
  }
  .gm .content_table td{display:block;text-align:left !important;max-width:none}
  .gm .content_table td:nth-child(2){margin-top:8px}
  .gm .content_table td:nth-child(2) p{font-size:19px}
  .gm .content_table td:nth-child(3){margin-top:6px}

  .gm .main_content .container > .btn{width:100%;text-align:center}
}

/* ==========================================================================
   Health screening family (page-blood.php: 372-376), 17 Sep 2026.
   Owner: white hero with black text; pastel tiles that fade to white like
   the homepage; less like the old site.
   ========================================================================== */
/* Hero: BLACK with white type, same as the new pages (owner, 17 Sep 2026).
   The old H1 carries inline styles, hence !important */
.gm .page_top{background:var(--gm-black);padding:72px 0 64px;border-bottom:0}
.gm .page_top .section_description{max-width:760px;margin:0 auto 32px}
.gm .page_top h1,
.gm .page_top .section_title,
.gm .page_top .section_title h1{
  color:#fff !important;font-family:inherit !important;font-weight:600 !important;
  font-size:clamp(36px,5.4vw,58px) !important;letter-spacing:-0.04em;line-height:1.06;margin:0 0 20px;
}
.gm .page_top .section_title br{display:none}
.gm .page_top_icon{margin:0 0 20px}
.gm .page_top_icon img{height:44px;width:auto;margin:0 auto}
.gm .page_top .section_text p{color:var(--gm-ink-2);font-size:clamp(17px,1.9vw,20px);line-height:1.55;margin:0 0 12px}
.gm .page_top .typical_text{max-width:760px;margin:0 auto 32px;text-align:left}
.gm .page_top .typical_text p,
.gm .page_top .typical_text li{color:var(--gm-ink-2);font-size:17px;line-height:1.6}
.gm .page_top .typical_text ul{display:grid;gap:6px;margin:0 0 20px}
.gm .page_top .typical_text li{position:relative;padding-left:20px;margin:0}
.gm .page_top .typical_text li:before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--gm-blue);margin:0}

.gm .page_top_lists{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:0 auto}
.gm .page_top_lists ul{display:contents}
.gm .page_top_lists .list_links li{margin:0}
.gm .page_top_lists .list_links a{
  display:inline-flex;align-items:center;padding:9px 16px;border-radius:100px;
  background:var(--gm-grey-bg);border:1px solid var(--gm-line-soft);
  color:var(--gm-ink);font-size:14px;font-weight:500;line-height:1.3;
}
.gm .page_top_lists .list_links a:hover{background:#fff;border-color:var(--gm-blue);color:var(--gm-blue);text-decoration:none}
.gm .page_top_lists .list_links a svg{display:none}
.gm .page_top_buttons{margin-top:36px;text-align:center}

.gm .service_tabs{background:#fff;border-bottom:1px solid var(--gm-line-soft);padding:14px 0}
.gm .service_tabs_wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.gm .service_tab_item{flex:0 0 auto;padding:9px 18px;border-radius:100px;background:transparent}
.gm .service_tab_item:after,
.gm .service_tab_icon{display:none}
.gm .service_tab_item:hover{background:var(--gm-grey-bg)}
.gm .service_tab_name,
.gm .service_tab_item:hover .service_tab_name{font-size:14px;font-weight:500;color:var(--gm-ink-2);margin:0;line-height:1.3}
.gm .service_tab_item.current,
.gm .service_tab_item.current:hover{background:var(--gm-ink)}
.gm .service_tab_item.current .service_tab_name{color:#fff}

.gm .service_select_current,
.gm .service_select_current.active{background:#fff;color:var(--gm-ink);border-bottom:1px solid var(--gm-line-soft);font-weight:600;font-size:15px;padding:16px 24px}
.gm .service_select_current svg,
.gm .service_select_current.active svg{fill:var(--gm-ink)}
.gm .service_select_dropdown{background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.12);z-index:50}
.gm .service_select_list li{border-bottom:1px solid var(--gm-line-soft)}
.gm .service_select_list a{padding:14px 24px;color:var(--gm-ink)}

.page-template-page-blood-php .main_content{background:#fff !important}
.page-template-page-blood-php .info_boxes_wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0}
.page-template-page-blood-php .info_box{
  width:auto;margin:0;min-height:0;padding:30px 28px;border-radius:22px;
  border:1px solid rgba(0,0,0,.05);scroll-margin-top:80px;
  background:linear-gradient(180deg,#DCEBFF 0%,#FFFFFF 100%);
}
.page-template-page-blood-php .info_box:nth-child(6n+2){background:linear-gradient(180deg,#D9F2EC 0%,#FFFFFF 100%)}
.page-template-page-blood-php .info_box:nth-child(6n+3){background:linear-gradient(180deg,#EBE4FB 0%,#FFFFFF 100%)}
.page-template-page-blood-php .info_box:nth-child(6n+4){background:linear-gradient(180deg,#FFE3E0 0%,#FFFFFF 100%)}
.page-template-page-blood-php .info_box:nth-child(6n+5){background:linear-gradient(180deg,#FFF0D9 0%,#FFFFFF 100%)}
.page-template-page-blood-php .info_box:nth-child(6n+6){background:linear-gradient(180deg,#E2F0D9 0%,#FFFFFF 100%)}
.page-template-page-blood-php .info_box_title{font-size:21px;font-weight:600;letter-spacing:-0.02em;line-height:1.2;color:var(--gm-ink);margin:0 0 10px}
.page-template-page-blood-php .info_box_price{font-size:17px;font-weight:600;color:var(--gm-ink);margin:0 0 14px}
.page-template-page-blood-php .info_box .typical_text p,
.page-template-page-blood-php .info_box .typical_text li{font-size:15px;line-height:1.55;color:var(--gm-ink-2);margin:0 0 6px}
.page-template-page-blood-php .info_box .typical_text li:before{content:none}
.page-template-page-blood-php .info_blood_processed{background:var(--gm-grey-bg)}
.page-template-page-blood-php .content_bottom{margin-top:44px}

@media (max-width:1000px){
  .page-template-page-blood-php .info_boxes_wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .page-template-page-blood-php .info_boxes_wrap{grid-template-columns:1fr}
  .gm .page_top{padding:48px 0 44px}
}

/* Black hero: text, jump-link chips and icon on dark (17 Sep 2026) */
.gm .page_top .section_text p,
.gm .page_top .typical_text p,
.gm .page_top .typical_text li{color:#a1a1a6}
.gm .page_top_icon img{filter:invert(1) brightness(1.4)}
.gm .page_top_lists .list_links a{background:#1a1a1c;border-color:#2c2c2e;color:#fff}
.gm .page_top_lists .list_links a:hover{background:#000;border-color:var(--gm-blue-dark);color:#fff}
.gm .page_top .btn{background:var(--gm-blue-dark);color:#fff}