/*!
Theme Name: Practice By 31G
Theme URI: https://31g.co.uk/
Author: 31 Greens
Author URI: https://31g.co.uk/
Description: A clean, fast NHS-standard WordPress theme for GP General Practice websites. Deploy across multiple sites with shared updates.
Version: 1.0.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: practice-by-31g
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Practice By 31G is built by 31 Greens https://31g.co.uk/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic        - Normalize, Box sizing
# Variables      - NHS colours, layout, transitions
# Base           - Typography, Elements, Links, Forms, Buttons
# Layout         - Container, Site structure
# Header         - Alert bar, Info bar, Nav bar, Navigation
# Footer         - Main grid, Bottom bar
# Blocks         - Hero, Register Banner, Why Choose Us,
                   Services Grid, Testimonials, News Strip,
                   Contact, Map, CQC Badge, NHS App
# Posts & Pages
# Comments
# Widgets
# Media & Galleries
# Plugins        - Jetpack
# Utilities      - Accessibility, Alignments
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic — Normalize
--------------------------------------------------------------*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
main { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }


@font-face {
	font-family: 'Frutiger LT Pro';
	src: url('assets/fonts/fruitiger/Frutiger.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Frutiger LT Pro';
	src: url('assets/fonts/fruitiger/Frutiger_bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
    /* =========================
       CSS VARIABLES (GLOBAL)
    ========================= */
    :root {
      --primary-color: #005EB8;
      --light-grey-bg: #F7F8F9;
      --grey-bg: #F2F2F2;
      --accent-bg: #8B3378;
      --footer-bg: #D8DDE0;
      --preheader-bg: #FFDAD6;
      --preheader-text: #D5281B;
      --text-main: #212B32;
      --text-secondary: #475569;
      --text-dark-grey: #4C6272;
      --green: #409629;
    }
 
    /* =========================
       GLOBAL RESET / BASE
    ========================= */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
 
    body {
  font-family: 'Frutiger LT Pro', sans-serif;
      font-feature-settings: 'liga' off, 'clig' off;
      color: var(--text-main);
      background-color: #fff;
    }
	  /* =========================
       TEXT COLOR CLASSES
    ========================= */
    .text-main { color: var(--text-main); }
    .text-secondary { color: var(--text-secondary); }
    .text-dark-grey { color: var(--text-dark-grey); }
    .text-green { color: var(--green); }
 
    /* =========================
       BACKGROUND CLASSES
    ========================= */
    .bg-primary { background-color: var(--nhs-blue); }
    .bg-light-grey { background-color: var(--nhs-light-grey); }
    .bg-grey { background-color: var(--grey-bg); }
    .bg-accent { background-color: var(--accent-bg); }
    .bg-footer { background-color: var(--footer-bg); }
    .bg-preheader { background-color: var(--preheader-bg); }
 
    /* =========================
       PREHEADER TEXT
    ========================= */
    .preheader-text { color: var(--preheader-text); }
 
    /* =========================
       TYPOGRAPHY CLASSES
    ========================= */
    .heading-xl {
      font-size: 64px;
      font-weight: 400;
      line-height: 80px;
	  margin: 0;
    }
    .heading-lg {
      font-size: 36px;
      font-weight: 700;
      line-height: 42px;
	  margin: 0;
    }
    .heading-md {
      font-size: 36px;
      font-weight: 500;
      line-height: 45px;
	  margin: 0;
    }
    .text-base {
      color: #212B32;
      font-feature-settings: 'liga' off, 'clig' off;
      font-family: 'Frutiger LT Pro', sans-serif;
      font-size: 19px;
      font-style: normal;
      font-weight: 400;
      line-height: 28px;
    }
 





/* Box sizing
--------------------------------------------- */
*, *::before, *::after { box-sizing: inherit; }
html { box-sizing: border-box; }

/*--------------------------------------------------------------
# Variables — NHS Colour Palette & Theme Tokens
--------------------------------------------------------------*/
:root {
	/* NHS official colours */
	--nhs-blue:        #005EB8;
	--nhs-dark-blue:   #003087;
	--nhs-light-blue:  #41B6E6;
	--nhs-yellow:      #FFB81C;
	--nhs-green:       #009639;
	--nhs-red:         #DA291C;
	--nhs-black:       #231F20;
	--nhs-dark-grey:   #425563;
	--nhs-mid-grey:    #768692;
	--nhs-light-grey:  #F7F8F9;
	--nhs-pale-grey:   #E8EDEE;
	--nhs-white:       #FFFFFF;

	/* Theme colours — overridden by Customizer via customizer-css.php */
	--color-primary:   #005EB8;
	--color-secondary: #003087;

	/* Notice bar colours — overridden by Customizer */
	--color-notice-bg:   #DA291C;
	--color-notice-text: #ffffff;

	/* Navigation bar colours — overridden by Customizer */
	--color-nav-bg:   #005EB8;
	--color-nav-text: #ffffff;

	/* Footer colours — overridden by Customizer */
	--color-footer-bg:     #003087;
	--color-footer-text:   #ffffff;
	--color-footer-muted:  color-mix(in srgb, var(--color-footer-text) 65%, transparent);
	--color-footer-border: color-mix(in srgb, var(--color-footer-text) 18%, transparent);

	/* Layout */
	--container-max:  1130px;
	--container-pad:  clamp(1rem, 4vw, 2rem);
	--section-pad-v:  clamp(3rem, 6vw, 5rem);

	/* Typography */
	--font-body: 'Frutiger LT Pro', Arial, "Helvetica Neue", sans-serif;

	/* Interactions */
	--transition: 0.2s ease-in-out;
	--shadow-sm:  0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
	--shadow-md:  0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .06);
	--radius:     4px;
}

/*--------------------------------------------------------------
# Base — Typography
--------------------------------------------------------------*/
body, button, input, select, optgroup, textarea {
	color: var(--nhs-black);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: 700;
	line-height: 1.2;
	color: var(--nhs-black);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.375rem, 3vw, 2rem); margin: 0 0 1rem; }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); margin: 0 0 0.75rem; }
h4 { font-size: 1.125rem; margin: 0 0 0.75rem; }
h5 { font-size: 1rem; margin: 0 0 0.5rem; }
h6 { font-size: 0.875rem; margin: 0 0 0.5rem; }

p { margin: 0 0 1.25rem; }
dfn, cite, em, i { font-style: italic; }
blockquote { margin: 0 1.5rem; }
address { margin: 0 0 1.5rem; }

pre {
	background: var(--nhs-pale-grey);
	font-family: "Courier 10 Pitch", Courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6rem;
	max-width: 100%;
	overflow: auto;
	padding: 1.5rem;
}

code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; }
abbr, acronym { border-bottom: 1px dotted #666; cursor: help; }
mark, ins { background: #fff9c0; text-decoration: none; }
big { font-size: 125%; }

/* Base — Elements
--------------------------------------------- */
body { background: #fff; }

hr {
	background-color: var(--nhs-light-grey);
	border: 0;
	height: 1px;
	margin-bottom: 1.5rem;
}

ul, ol { margin: 0 0 1.5rem 2rem; }
ul { list-style: disc; }
ol { list-style: decimal; }
li > ul, li > ol { margin-bottom: 0; margin-left: 1.5rem; }
dt { font-weight: 700; }
dd { margin: 0 1.5rem 1.5rem; }

embed, iframe, object { max-width: 100%; }
img { height: auto; max-width: 100%; }
figure { margin: 1rem 0; }
table { margin: 0 0 1.5rem; width: 100%; }

/* Base — Links
--------------------------------------------- */
a { color: var(--color-primary); }
a:visited { color: var(--nhs-dark-blue); }
a:hover, a:active { color: var(--nhs-dark-blue); }
a:focus { outline: 3px solid var(--nhs-yellow); outline-offset: 2px; }
a:hover, a:active { outline: 0; }

/* Base — Forms
--------------------------------------------- */
label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.375rem;
	font-size: 0.9375rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	display: block;
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 2px solid var(--nhs-dark-grey);
	border-radius: var(--radius);
	background: #fff;
	color: var(--nhs-black);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color var(--transition), box-shadow var(--transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	outline: 3px solid var(--nhs-yellow);
	outline-offset: 0;
	border-color: var(--nhs-black);
}

select {
	border: 2px solid var(--nhs-dark-grey);
	padding: 0.5rem 0.875rem;
	border-radius: var(--radius);
	background: #fff;
}

textarea { width: 100%; resize: vertical; }

/* Base — Buttons
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--radius);
	background: var(--nhs-dark-grey);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
	white-space: nowrap;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover { background: #333; }

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
.btn:focus {
	outline: 3px solid var(--nhs-yellow);
	outline-offset: 2px;
}

.btn--primary {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.btn--primary:hover, .btn--primary:focus {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	color: #fff;
	text-decoration: none;
}

.btn--nhs {
	background: var(--nhs-blue);
	border-color: var(--nhs-blue);
	color: #fff;
}

.btn--nhs:hover, .btn--nhs:focus {
	background: var(--nhs-dark-blue);
	border-color: var(--nhs-dark-blue);
	color: #fff;
	text-decoration: none;
}

/* Register button — white bg so it stands out on any coloured nav bar */
.btn--register {
	background: #fff;
	border: 2px solid #fff;
	color: var(--color-nav-bg);
	border-radius: var(--radius);
	padding: 0.4375rem 1rem;
	font-size: 0.875rem;
	font-weight: 700;
	height: 36px;
	white-space: nowrap;
}

.btn--register:hover, .btn--register:focus {
	background: rgba(255, 255, 255, .88);
	border-color: rgba(255, 255, 255, .88);
	color: var(--color-nav-bg);
	text-decoration: none;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.site { display: flex; flex-direction: column; }
#content { flex: 1; }
.site-main { padding: 2.5rem 0; }
.home .site-main { padding-top: 0; }

/* Section utilities used across blocks */
.section-heading { font-size: clamp(1.375rem, 3vw, 2rem); margin-bottom: 0.5rem; }
.section-subheading {
	color: var(--nhs-dark-grey);
	font-size: 1.0625rem;
	margin-bottom: 2rem;
	max-width: 72ch;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--nhs-pale-grey);
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Offset sticky header when WordPress admin bar is visible */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* Skip link */
.skip-link {
	position: absolute;
	transform: translateY(-100%);
	left: 1rem;
	padding: 0.75rem 1.5rem;
	background: var(--nhs-yellow);
	color: var(--nhs-black);
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 var(--radius) var(--radius);
	transition: transform 0.2s;
	z-index: 200;
}

.skip-link:focus { transform: translateY(0); }

/* Notice bar */
.header-notice-bar {
	background: var(--color-notice-bg);
	color: var(--color-notice-text);
	font-size: 0.8125rem;
	padding: 0.4375rem 0;
	text-align: center;
}

.header-notice-bar .container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.header-notice-bar p {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.header-notice-bar__icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.header-notice-bar__icon svg {
	width: 16px;
	height: 16px;
}

.header-notice-bar a { color: var(--color-notice-text); text-decoration: underline; }
.header-notice-bar a:hover { opacity: .8; }

/* Info bar */
.header-info-bar {
	background: #fff;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--nhs-pale-grey);
}

.header-info-bar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.header-info-bar__left {
	display: flex;
	align-items: center;
}

.header-info-bar__right {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

/* Custom logo shown in info bar at natural SVG size */
.header-info-bar__left .custom-logo-link { display: inline-block; line-height: 0; }

.header-info-bar__left .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 60px;
}

.header-contact-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	color: var(--nhs-black);
	font-size: 0.8125rem;
	font-weight: 500;
	white-space: nowrap;
}

.header-contact-item svg {
	flex-shrink: 0;
	color: var(--nhs-blue);
}

.header-contact-item:hover { color: var(--nhs-blue); text-decoration: none; }

.header-contact-item--ooh { font-size: 0.75rem; }

/* Nav bar */
.header-nav-bar {
	background: var(--color-nav-bg);
	padding: 0.625rem 0;
}

.header-nav-bar .container {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

/* Branding inside nav — white text on coloured background */
.site-branding { flex-shrink: 0; }

.site-name-link {
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--color-nav-text);
}

.site-name-link:hover { color: var(--color-nav-text); opacity: .85; text-decoration: none; }
.custom-logo-link { display: inline-block; }
.custom-logo-link img { display: block; }

/* Navigation
--------------------------------------------- */
.main-navigation { flex: 1; }

.main-navigation ul {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li { position: relative; margin: 0; }

.main-navigation a {
	display: block;
	padding: 0.5rem 0.875rem;
	color: var(--color-nav-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
	border-radius: var(--radius);
	white-space: nowrap;
	transition: background var(--transition), color var(--transition);
}

.main-navigation a:hover,
.main-navigation a:focus {
	background: rgba(255, 255, 255, .15);
	color: var(--color-nav-text);
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-parent > a {
	background: rgba(255, 255, 255, .2);
	color: var(--color-nav-text);
}

/* Dropdown — always white bg regardless of nav colour */
.main-navigation ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	border: 1px solid var(--nhs-pale-grey);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	min-width: 220px;
	padding: 0.375rem 0;
	z-index: 200;
	display: none;
}

.main-navigation ul ul li { width: 100%; }

.main-navigation ul ul a {
	padding: 0.5rem 1rem;
	border-radius: 0;
	font-size: 0.875rem;
	color: var(--nhs-black);
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
	background: var(--nhs-pale-grey);
	color: var(--nhs-black);
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul { display: block; }

/* Mobile hamburger — white on coloured nav */
.menu-toggle {
	display: none;
	border: 2px solid rgba(255, 255, 255, .5);
	background: transparent;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	flex-shrink: 0;
	padding: 8px;
}

.menu-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}

/* Header actions (search + register) */
.header-nav-bar__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

/* Header search form */
.header-search { flex-shrink: 0; }

.header-search__wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.header-search__input {
	display: block;
	width: 160px;
	height: 36px;
	padding: 0 2.125rem 0 0.75rem;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: var(--radius);
	background: #fff;
	color: var(--nhs-black);
	font-size: 0.875rem;
	line-height: 1;
	transition: border-color var(--transition);
}

.header-search__input:focus {
	outline: none;
	border-color: var(--nhs-blue);
	box-shadow: 0 0 0 2px var(--nhs-yellow);
	color: var(--nhs-black);
}

.header-search__input::placeholder { color: var(--nhs-mid-grey); }

.header-search__btn {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 34px;
	border: none;
	background: transparent;
	color: var(--nhs-dark-grey);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	border-radius: 0 var(--radius) var(--radius) 0;
}

.header-search__btn:hover { color: var(--nhs-blue); }
.header-search__btn:focus { outline: 2px solid var(--nhs-yellow); }

/* Hide search on mobile to keep nav clean */
@media (max-width: 960px) {
	.header-search { display: none; }
}

/* Responsive nav */
@media (max-width: 960px) {
	.menu-toggle { display: inline-flex; }

	.main-navigation {
		order: 10;
		flex-basis: 100%;
	}

	.main-navigation ul {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.25rem 0;
		border-top: 1px solid rgba(255, 255, 255, .2);
	}

	.main-navigation.toggled ul { display: flex; }

	.main-navigation a {
		border-radius: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
	}

	.header-nav-bar .container { flex-wrap: wrap; }
	.header-nav-bar__actions { margin-left: auto; }
}

@media (max-width: 640px) {
	.header-info-bar .container { flex-direction: column; align-items: flex-start; }
	.header-info-bar__right { gap: 1rem; }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
	background: var(--color-footer-bg);
	color: var(--color-footer-text);
}

.footer-main { padding: 3rem 0; }

.footer-main__grid {
	display: grid;
	grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
	gap: 2.5rem;
}

.footer-col__heading {
	color: var(--color-footer-text);
	font-size: 1rem;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--color-footer-border);
}

/* About column */
.footer-logo-link { display: inline-block; line-height: 0; margin-bottom: 0.75rem; }
.footer-logo-link .custom-logo-link { display: inline-block; line-height: 0; }

.footer-logo,
.footer-logo-link .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 56px;
}
.footer-practice-name { font-size: 1.0625rem; font-weight: 700; color: var(--color-footer-text); margin-bottom: 0.5rem; }
.footer-desc { color: var(--color-footer-muted); font-size: 0.875rem; line-height: 1.6; margin-bottom: 1rem; }

/* Social icons */
.footer-social { display: flex; gap: 0.625rem; }

.footer-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--color-footer-border);
	border-radius: 50%;
	color: var(--color-footer-text);
	text-decoration: none;
	transition: background var(--transition);
}

.footer-social__link:hover { background: var(--color-footer-muted); color: var(--color-footer-text); }

/* Links column */
.footer-col--links ul { list-style: none; padding: 0; margin: 0; }

.footer-col--links li {
	border-bottom: 1px solid var(--color-footer-border);
}

.footer-col--links a {
	display: block;
	padding: 0.5rem 0;
	color: var(--color-footer-muted);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color var(--transition);
}

.footer-col--links a:hover { color: var(--color-footer-text); text-decoration: underline; }

/* Opening hours */
.footer-hours { color: var(--color-footer-muted); font-size: 0.875rem; }
.footer-hours p { 
	line-height: 2.2;
	margin-bottom: 0.375rem; }
.footer-hours__placeholder { color: var(--color-footer-muted); font-size: 0.875rem; font-style: italic; }

/* CQC column */
.footer-col--cqc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.cqc-footer-link {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	text-decoration: none;
}

.cqc-logo { filter: brightness(0) invert(1); }

.cqc-rating-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 3px;
	font-weight: 700;
	font-size: 0.875rem;
}

.cqc-rating-badge--good           { background: #00A499; color: #fff; }
.cqc-rating-badge--outstanding     { background: var(--nhs-yellow); color: var(--nhs-black); }
.cqc-rating-badge--requires-improvement { background: #FF9F00; color: var(--nhs-black); }
.cqc-rating-badge--inadequate      { background: var(--nhs-red); color: #fff; }

/* Footer bottom bar */
.footer-bottom {
	background: rgba(0, 0, 0, .2);
	padding: 1rem 0;
	border-top: 1px solid var(--color-footer-border);
}

.footer-bottom__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.footer-cqc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

.footer-col--you-gp ul { list-style: none; padding: 0; margin: 0; }
.footer-col--you-gp li { border-bottom: 1px solid var(--color-footer-border); }
.footer-col--you-gp a {
	display: block;
	padding: 0.5rem 0;
	color: var(--color-footer-muted);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color var(--transition);
}
.footer-col--you-gp a:hover { color: var(--color-footer-text); text-decoration: underline; }

.footer-copyright, .footer-credit {
	color: var(--color-footer-muted);
	font-size: 0.8125rem;
	margin: 0;
}

.footer-credit a { color: var(--color-footer-muted); }
.footer-credit a:hover { color: var(--color-footer-text); }

.footer-legal-nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-legal-nav a {
	color: var(--color-footer-muted);
	font-size: 0.8125rem;
	text-decoration: none;
	padding: 0.25rem 0.75rem;
	border-left: 1px solid var(--color-footer-border);
}

.footer-legal-nav li:first-child a { border-left: none; padding-left: 0; }
.footer-legal-nav a:hover { color: var(--color-footer-text); text-decoration: underline; }

/* Footer responsive */
@media (max-width: 960px) {
	.footer-main__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.footer-main__grid { grid-template-columns: 1fr; }
	.footer-bottom__inner { flex-direction: column; align-items: flex-start; }
	.footer-legal-nav ul { flex-direction: column; }
	.footer-legal-nav a { border-left: none; padding-left: 0; }
}

/*--------------------------------------------------------------
# Block — Hero Banner
--------------------------------------------------------------*/
.gp-hero {
	position: relative;
	background: var(--nhs-dark-blue) center top/cover no-repeat;
	min-height: 495px;
	display: flex;
    align-items: stretch;
}

.gp-hero__overlay {
	position: absolute;
	inset: 0;
	/* background: linear-gradient(
		to right,
		rgba(0, 48, 135, .97) 0%,
		rgba(0, 48, 135, .95) 38%,
		rgba(0, 48, 135, .55) 55%,
		rgba(0, 48, 135, .0) 72%
	); */
	display: flex;
	align-items: center;
	width: 100%;
}

.gp-hero .container {
	position: relative;
	z-index: 1;
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

.gp-hero__content { 
	padding: 36px 40px 40px 36px;
    margin-left: -200px;
    margin-bottom: -345px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 770px;
	color: #fff; 
    background: var(--nhs-blue)
}

.gp-hero__heading {
	width: 85%;
	color: #fff;
	font-size: clamp(1.75rem, 4vw, 4rem);
}

.gp-hero__subheading {
	color: rgba(255, 255, 255, .9);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin-bottom: 0;
}
.hero-desc {
  color: #fff;
  font-size: 24px;
  line-height: 32px;
}

@media (max-width: 640px) {
	.gp-hero { min-height: 320px; }
	/* .gp-hero__overlay { background: rgba(0, 48, 135, .82); } */
	.gp-hero__content { max-width: 100%; }
	.hero-desc {
    font-size: 15px;
  }
}

/*--------------------------------------------------------------
# Block — Register Banner
--------------------------------------------------------------*/
.gp-register-banner {
	background: var(--nhs-light-grey);
    border-bottom: 3px solid var(--nhs-pale-grey);
    padding: 150px 0 80px;
}

.gp-register-banner .container{
	max-width: 100%;
}

.gp-register-banner__inner {
	width: 1300px;
    margin: 0 auto;
    padding: 32px 40px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.gp-register-banner__text h2 {
	color: var(--text-main);
	margin-bottom: 10px;
	/* font-size: 1.25rem;
	margin: 0 0 0.25rem; */
}

.gp-register-banner__text p {
	margin: 0;
	color: #4B5563;
    font-family: 'Frutiger LT Pro', sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 24px;
}

.gp-register-banner__btn {
	display: inline-flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 8px;
    border-top: var(--stroke-weight-1, 1px) solid #1E398A;
    border-right: var(--stroke-weight-1, 1px) solid #1E398A;
    border-bottom: var(--radius-4, 4px) solid #1E398A;
    border-left: var(--stroke-weight-1, 1px) solid #1E398A;
    background: var(--links-nhsuk-link-color, #005EB8);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: opacity 0.15s ease;
    padding: 12px 17px;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
	
	/* display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 1.375rem;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9375rem;
	border-radius: var(--radius);
	white-space: nowrap;
	transition: background var(--transition);
	flex-shrink: 0; */
}

.gp-register-banner__btn:hover,
.gp-register-banner__btn:focus {
	background: var(--color-secondary);
	color: #fff;
	text-decoration: none;
}

.gp-register-banner__btn .nhs-logo-inline {
	filter: brightness(0) invert(1);
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.gp-register-banner__inner { flex-direction: column; align-items: flex-start; }
}

/*--------------------------------------------------------------
# Block — Why Choose Us
--------------------------------------------------------------*/
.gp-why-choose-us {
	padding: var(--section-pad-v) 0;
	background: #fff;
}

.gp-why-choose-us .section-heading { margin-bottom: 2.5rem; }

.gp-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.gp-feature-card { 
	padding: 1.5rem 1rem;
	border-top: 1px solid #D8DDE0;
    border-right: 1px solid #D8DDE0;
    border-bottom: 4px solid #D8DDE0;
    border-left: 1px solid #D8DDE0;
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
 }

.gp-feature-card__title {
	font-size: 1.6rem;
	color: var(--text-main);
    font-family: 'Frutiger LT Pro', sans-serif;
    font-weight: 700;
    line-height: 32px;
}

.gp-feature-card__desc {
	margin-bottom: 1rem;
	    color: #212B32;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    width: 90%;
}

.gp-feature-card__link {
	color: var(--color-primary);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    text-decoration-line: underline;
}

.gp-feature-card__link:hover { color: var(--color-secondary); }

@media (max-width: 768px) {
	.gp-feature-grid { grid-template-columns: 1fr; gap: 0.5rem; }
}

/*--------------------------------------------------------------
# Block — Services Grid
--------------------------------------------------------------*/
.gp-services {
	padding: var(--section-pad-v) 0;
	background: var(--nhs-light-grey);;
}

.gp-services .section-heading { margin-bottom: 0.5rem; }

.gp-services .section-intro {
	color: var(--text-main);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    width: 95%;
	margin-bottom: 36px;
}

.gp-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.gp-service-link {
	border-top: 1px solid #D8DDE0;
    border-right: 1px solid #D8DDE0;
    border-bottom: 4px solid #D8DDE0;
    border-left: 1px solid #D8DDE0;
    background: #FFF;
    padding: 27px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
	transition: background var(--transition), color var(--transition);

	    color: var(--nhs-blue);
    font-size: 21px;
    font-weight: 700;
    line-height: 29px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.gp-service-link svg{
	width: 26px;
}

.gp-service-link:hover, .gp-service-link:focus {
	background: var(--nhs-pale-grey);
	color: var(--color-secondary);
	text-decoration: underline;
}

.gp-service-link__arrow {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--color-primary);
}

.gp-service-link:hover .gp-service-link__arrow { color: var(--color-secondary); }

@media (max-width: 768px) { .gp-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gp-services__grid { grid-template-columns: 1fr; } }

/*--------------------------------------------------------------
# Block — Testimonials
--------------------------------------------------------------*/
.gp-testimonials {
	padding: var(--section-pad-v) 0;
}

.gp-testimonials__header { margin-bottom: 2rem; }

.gp-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.gp-testimonials__header, .gp-testimonials__header h2, .gp-testimonials__header p{
	text-align: center;
}
.gp-testimonials__header .gp-testimonials-subheading{
	    color: var(--text-secondary);
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}

.gp-testimonial {
	background: #fff;
	border-radius: var(--radius);
	padding: 1.5rem;
	margin: 0;
	box-shadow: var(--shadow-sm);
}

.gp-testimonial__stars {
	color: var(--nhs-yellow);
	font-size: 1.125rem;
	margin-bottom: 0.75rem;
	letter-spacing: 0.05em;
}

.gp-testimonial__quote , .testimonial__content{
	color: #1A1A1A;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: 'Frutiger LT Pro', sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 24px;
    flex: 1;
}

.gp-testimonial__author {
	    color: #1A1A1A;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.gp-testimonial__meta {
	font-size: 0.8125rem;
	color: var(--nhs-mid-grey);
}

.gp-testimonials__empty { color: var(--nhs-dark-grey); font-style: italic; }

@media (max-width: 960px) { .gp-testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gp-testimonials__grid { grid-template-columns: 1fr; } }

/*--------------------------------------------------------------
# Block — News Strip
--------------------------------------------------------------*/
.gp-news {
	padding: var(--section-pad-v) 0;
	background: #fff;
}

.gp-news__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 2rem;
	flex-wrap: wrap;
	gap: 1rem;
}

.gp-news__header .section-subheading { 
	margin-bottom: 0;
	color: var(--text-main);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    width: 90%;
 }

.gp-news__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.gp-news-card {
	    border: 1px solid #d0d5d8;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}

.gp-news-card__image { aspect-ratio: 16/9; overflow: hidden; }

.gp-news-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.gp-news-card:hover .gp-news-card__image img { transform: scale(1.03); }

.gp-news-card__body { 
	padding: 16px;
    border-top: 1px solid var(--border-nhsuk-border-color, #D8DDE0);
    border-right: 1px solid var(--border-nhsuk-border-color, #D8DDE0);
    border-bottom: 4px solid var(--border-nhsuk-border-color, #D8DDE0);
    border-left: 1px solid var(--border-nhsuk-border-color, #D8DDE0);
    background: var(--brand-color-nhsuk-white, #FFF);
    display: flex;
    flex-direction: column;
    gap: 10px;
 }

.gp-news-card__title {
	color: var(--nhs-blue);
    font-size: 23px;
    font-weight: 700;
    line-height: 32px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
	margin: 0;
}

.gp-news-card__title a {
	
}

.gp-news-card__title a:hover { color: var(--color-primary); text-decoration: underline; }

.gp-news-card__excerpt {
	color: var(--text-main);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}

.gp-news__all-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: underline;
	font-size: 0.9375rem;
	white-space: nowrap;
}

@media (max-width: 960px) { .gp-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gp-news__grid { grid-template-columns: 1fr; } }

/*--------------------------------------------------------------
# Block — Contact
--------------------------------------------------------------*/
.gp-contact {
	padding: var(--section-pad-v) 0;
	background: var(--nhs-light-grey);
}

.gp-contact .section-heading { margin-bottom: 0.5rem; }
.gp-contact .contact-subheading { 
	color: var(--text-main);
    font-size: 19px;
    font-weight: 400;
    line-height: 30px;
    width: 92%;
	margin-bottom: 2rem; }

.gp-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 3rem;
}

.gp-contact__info{
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.gp-contact__info-item { 
	background: #fff;
    border: 1px solid #D8DDE0;
    padding: 32px 32px 45px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 16px;
}

.gp-contact__info-label {
	color: var(--nhs-dark-grey);
    font-size: 26px;
    font-weight: 700;
    line-height: 32px;
	margin-bottom: 0;
}

.gp-contact__info-value { 
    font-size: 19px;
    font-weight: 400;
    line-height: 28px;
	color: var(--nhs-black); }

.gp-contact__info-value a {
	color: var(--nhs-black);
	font-weight: 600;
	text-decoration: none;
}

.gp-contact__info-value a:hover { color: var(--color-primary); text-decoration: underline; }

.gp-contact__address { line-height: 1.6; margin: 0; }

.gp-contact__directions {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--color-primary);
	font-weight: 600;
	font-size: 0.875rem;
	margin-top: 0.5rem;
}

.gp-contact__form-title { 
	    color: var(--text-main);
    font-family: 'Frutiger LT Pro', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 42px;
    margin-bottom: 24px; }

.gp-contact__form {
	background: #fff;
    border: 1px solid #D8DDE0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.gp-contact__form .form-row { margin-bottom: 1.25rem; }

.gp-contact__form label {
	font-weight: 600;
	margin-bottom: 0.375rem;
	font-size: 0.9375rem;
}

.gp-contact__submit {
	margin-top: 0.5rem;
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.gp-contact__submit:hover { background: var(--color-secondary); border-color: var(--color-secondary); }

@media (max-width: 768px) { .gp-contact__grid { grid-template-columns: 1fr; } }

/*--------------------------------------------------------------
# Block — Map
--------------------------------------------------------------*/
.gp-map { padding: 0; }

.gp-map__container { margin-bottom: 0; }

.gp-map__embed {
	position: relative;
	height: 420px;
	overflow: hidden;
}

.gp-map__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.gp-map__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nhs-pale-grey);
	height: 100%;
	color: var(--nhs-dark-grey);
	font-style: italic;
}

@media (max-width: 600px) { .gp-map__embed { height: 280px; } }

/*--------------------------------------------------------------
# Block — CQC Badge
--------------------------------------------------------------*/
.gp-cqc {
	padding: 3rem 0;
	background: var(--nhs-light-grey);
	color: #fff;
}

.gp-cqc__inner {
	display: flex;
	align-items: center;
	gap: 3rem;
	flex-wrap: wrap;
	padding: 80px 60px;
	background: var(--accent-bg);
}

.gp-cqc__left {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	width: 35%;
}

.gp-cqc__left-label {
	display: none;
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	max-width: 260px;
	line-height: 1.4;
	color: #fff;
}

.gp-cqc__cqc-logo { 
	width: 80%;
	filter: brightness(0) invert(1); }

.gp-cqc__divider {
	width: 1px;
	height: 80px;
	background: rgba(255, 255, 255, .3);
	flex-shrink: 0;
}

.gp-cqc__right {
	flex: 1;
	min-width: 200px;
}

.gp-cqc__right .top-label{
	font-weight: 600;
}

.gp-cqc__rating-label {
	color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
	margin-bottom: 0.5rem;
}

.gp-cqc__rating-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 1rem;
}

.gp-cqc__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.btn--cqc {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-family: 'Frutiger LT Pro', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-decoration: none;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 0 0 #00401E;
	transition: background var(--transition);
	background: var(--nhs-blue);
	color: #fff;
}

.btn--cqc:hover { background: var(--nhs-dark-blue); border-color: var(--nhs-dark-blue); color: #fff; text-decoration: none; }

.btn--cqc-outline {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.25rem;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .6);
	color: #fff;
	border-radius: var(--radius);
	font-weight: 700;
	text-decoration: none;
	font-size: 0.9375rem;
	transition: border-color var(--transition), background var(--transition);
}
.cqc-rating-badge--good{
	display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding: 5px 14px;
    border-radius: 2px;
    align-self: flex-start;
} 
.btn--cqc-outline{
	display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-decoration: none;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 0 0 #00401E;
	background-color:  var(--text-dark-grey);
}

.btn--cqc-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }

@media (max-width: 768px) {
	.gp-cqc__inner { flex-direction: column; align-items: flex-start; }
	.gp-cqc__divider { display: none; }
}

/*--------------------------------------------------------------
# Block — NHS App
--------------------------------------------------------------*/
.gp-nhs-app {
	padding: var(--section-pad-v) 0;
	background: #fff;
}

.gp-nhs-app__inner {
	margin: 0 auto;
    padding: 24px 36px;
    border: 1px solid;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    border-color: rgba(33, 43, 50, 0.20);
    align-items: center;
    background-color: var(--nhs-light-grey);
}

.gp-nhs-app__title {
	font-size: clamp(1.375rem, 3vw, 2rem);
	margin-bottom: 1rem;
}

.gp-nhs-app__content p {
	color: var(--nhs-dark-grey);
    font-size: 19px;
    font-weight: 400;
    line-height: 28px;
}

.gp-nhs-app__image { text-align: center; }
.gp-nhs-app__image img { max-width: 90%; height: auto; }

@media (max-width: 768px) {
	.gp-nhs-app__inner { grid-template-columns: 1fr; gap: 2rem; }
	.gp-nhs-app__image { order: -1; }
}

/*--------------------------------------------------------------
# Block — Opening Hours
--------------------------------------------------------------*/
.gp-opening-hours {
	padding: var(--section-pad-v) 0;
	background: var(--nhs-pale-grey);
}

.gp-opening-hours__inner {
	max-width: 560px;
}

.gp-opening-hours__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.gp-opening-hours__icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	color: var(--color-primary);
}

.gp-opening-hours__heading {
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	margin: 0;
}

.gp-opening-hours__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.gp-opening-hours__row td {
	padding: 0.625rem 0.75rem;
	font-size: 0.9375rem;
	border-bottom: 1px solid var(--nhs-light-grey);
	vertical-align: middle;
}

.gp-opening-hours__day {
	font-weight: 600;
	color: var(--nhs-black);
	width: 55%;
}

.gp-opening-hours__time {
	color: var(--nhs-dark-grey);
	text-align: right;
}

.gp-opening-hours__row--today td {
	background: #fff;
}

.gp-opening-hours__row--today .gp-opening-hours__day {
	color: var(--color-primary);
}

.gp-opening-hours__row--today .gp-opening-hours__time {
	color: var(--nhs-black);
	font-weight: 600;
}

.gp-opening-hours__today-badge {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.125rem 0.5rem;
	background: var(--color-primary);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: middle;
}

.gp-opening-hours__row--note td {
	color: var(--nhs-dark-grey);
	font-style: italic;
	font-size: 0.875rem;
}

.gp-opening-hours__note {
	margin-top: 1.25rem;
	padding: 0.875rem 1rem;
	background: #fff;
	border-left: 4px solid var(--color-primary);
	color: var(--nhs-dark-grey);
	font-size: 0.875rem;
	line-height: 1.6;
}

.gp-opening-hours__empty {
	color: var(--nhs-dark-grey);
	font-style: italic;
	font-size: 0.9375rem;
}

/*--------------------------------------------------------------
# Inner Page Floating Sidebar
# Fixed to the right side of the viewport — does NOT affect layout.
--------------------------------------------------------------*/
.page-sidebar {
	position: fixed;
	right: 1.5rem;
	top: 70%;
	transform: translateY(-50%);
	width: 240px;
	z-index: 90;
	background: var(--nhs-dark-blue);
	color: #fff;
	padding: 1.375rem;
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
}

.page-sidebar__heading {
	font-size: 1rem;
	color: #fff;
	margin: 0 0 0.375rem;
}

.page-sidebar__sub {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, .8);
	margin: 0 0 1rem;
	line-height: 1.5;
}

.page-sidebar__btn {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 2px solid rgba(255, 255, 255, .7);
	border-radius: var(--radius);
	color: #fff;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	transition: background var(--transition), border-color var(--transition);
}

.page-sidebar__btn:hover {
	background: rgba(255, 255, 255, .15);
	border-color: #fff;
	color: #fff;
	text-decoration: none;
}

.page-sidebar__footer {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, .2);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.page-sidebar__service {
	font-size: 0.6875rem;
	color: rgba(255, 255, 255, .6);
}

.page-sidebar__logo {
	max-height: 22px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: .7;
}

/* Hide on smaller screens where it would overlap content */
@media (max-width: 1200px) {
	.page-sidebar { display: none; }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
/* Auto-breadcrumbs wrapper (rendered by template, outside entry-content) */
.gp-auto-breadcrumbs {
	background: #fff;
	border-bottom: 1px solid var(--nhs-pale-grey);
}

.breadcrumbs {
	padding: 0.75rem 0;
	background: transparent;
}

.breadcrumbs__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 0;
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
	font-size: 0.8125rem;
	color: var(--nhs-dark-grey);
}

.breadcrumbs__item a {
	color: var(--color-primary);
	text-decoration: none;
}

.breadcrumbs__item a:hover { text-decoration: underline; }

.breadcrumbs__item--current span { color: var(--nhs-dark-grey); }

.breadcrumbs__sep {
	margin: 0 0.375rem;
	color: var(--nhs-light-grey);
	font-size: 0.75rem;
}

/* Breadcrumbs are contained by .gp-block-page .entry-content — no extra wrapper needed */

/*--------------------------------------------------------------
# Register Sidebar (float-right CTA card)
--------------------------------------------------------------*/
.gp-register-sidebar {
	float: right;
	clear: right;
	width: 260px;
	margin: 0 0 1.5rem 2rem;
	background: var(--nhs-dark-blue);
	color: #fff;
	padding: 1.375rem;
	border-radius: var(--radius);
}

.gp-register-sidebar__heading {
	font-size: 1rem;
	color: #fff;
	margin: 0 0 0.375rem;
}

.gp-register-sidebar__sub {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, .8);
	margin: 0 0 1rem;
	line-height: 1.5;
}

.gp-register-sidebar__btn {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 2px solid rgba(255, 255, 255, .7);
	border-radius: var(--radius);
	color: #fff;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	transition: background var(--transition), border-color var(--transition);
}

.gp-register-sidebar__btn:hover {
	background: rgba(255, 255, 255, .15);
	border-color: #fff;
	color: #fff;
	text-decoration: none;
}

.gp-register-sidebar__footer {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, .2);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.gp-register-sidebar__service-label {
	font-size: 0.6875rem;
	color: rgba(255, 255, 255, .65);
}

.gp-register-sidebar__partner-logo {
	max-height: 24px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: .7;
}

@media (max-width: 640px) {
	.gp-register-sidebar {
		float: none;
		width: 100%;
		margin: 0 0 1.5rem;
	}
}

/*--------------------------------------------------------------
# Accordion Item
--------------------------------------------------------------*/
.gp-accordion-item {
	border-bottom: 1px solid var(--nhs-pale-grey);
}

.gp-accordion-item:first-of-type { border-top: 1px solid var(--nhs-pale-grey); }

.gp-accordion-item summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 0;
	cursor: pointer;
	user-select: none;
}

.gp-accordion-item summary::-webkit-details-marker { display: none; }
.gp-accordion-item summary::marker { display: none; }

.gp-accordion-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	min-width: 22px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
	transition: background var(--transition);
}

/* The +/− symbol via CSS */
.gp-accordion-item__icon::before { content: '+'; }
.gp-accordion-item[open] .gp-accordion-item__icon::before { content: '−'; }

.gp-accordion-item[open] .gp-accordion-item__icon {
	background: var(--color-secondary);
}

.gp-accordion-item__title {
	color: var(--color-primary);
	font-weight: 600;
	font-size: 0.9375rem;
}

.gp-accordion-item summary:hover .gp-accordion-item__title {
	text-decoration: underline;
}

.gp-accordion-item__content {
	padding: 0.75rem 0 1.25rem 2.125rem;
}

.gp-accordion-item__content > :last-child { margin-bottom: 0; }

/* Smooth open animation */
.gp-accordion-item__content {
	animation: accordion-open .2s ease-out;
}

@keyframes accordion-open {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/*--------------------------------------------------------------
# Featured Panel (image + coloured content box)
--------------------------------------------------------------*/
.gp-featured-panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 280px;
	max-width: 1130px;
    margin: 25px auto !important;
    max-height: 460px;
}

.gp-featured-panel__image {
	overflow: hidden;
}

.gp-featured-panel__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gp-featured-panel__content {
	padding: 2.5rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.gp-featured-panel__heading {
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	margin-bottom: 1rem;
	color: inherit;
}

.gp-featured-panel__body p { color: inherit; opacity: .9; }
.gp-featured-panel__body p:last-child { margin-bottom: 0; }

.gp-featured-panel--image-right .gp-featured-panel__image { order: 2; }
.gp-featured-panel--image-right .gp-featured-panel__content { order: 1; }

@media (max-width: 768px) {
	.gp-featured-panel {
		grid-template-columns: 1fr;
	}
	.gp-featured-panel__image { min-height: 220px; }
	.gp-featured-panel--image-right .gp-featured-panel__image { order: 0; }
	.gp-featured-panel--image-right .gp-featured-panel__content { order: 0; }
}

/*--------------------------------------------------------------
# Careers Banner
--------------------------------------------------------------*/
.gp-careers-banner {
	padding: var(--section-pad-v) 0;
}

.gp-careers-banner__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.gp-careers-banner__heading {
	font-size: clamp(1.375rem, 3vw, 1.875rem);
	color: #fff;
	margin-bottom: 1rem;
}

.gp-careers-banner__body p {
	color: rgba(255, 255, 255, .85);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.gp-careers-banner__btn {
	display: inline-flex;
	align-items: center;
	margin-top: 1.25rem;
	padding: 0.625rem 1.375rem;
	border: 2px solid #fff;
	border-radius: var(--radius);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9375rem;
	transition: background var(--transition);
}

.gp-careers-banner__btn:hover {
	background: rgba(255, 255, 255, .15);
	color: #fff;
	text-decoration: none;
}

.gp-careers-banner__image {
	overflow: hidden;
	border-radius: var(--radius);
	max-height: 380px;
}

.gp-careers-banner__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 768px) {
	.gp-careers-banner__inner {
		grid-template-columns: 1fr;
	}
	.gp-careers-banner__image { order: -1; max-height: 240px; }
}

/*--------------------------------------------------------------
# Service Single page
--------------------------------------------------------------*/
.gp-service-single__hero {
	background: var(--nhs-pale-grey);
	padding: 2rem 0;
	border-bottom: 1px solid var(--nhs-light-grey);
}

.gp-service-single__title {
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	margin-bottom: 0.5rem;
}

.gp-service-single__excerpt {
	color: var(--nhs-dark-grey);
	font-size: 1.0625rem;
	margin: 0;
}

.gp-service-single__thumbnail {
	padding: 2rem 0 0;
}

.gp-service-single__image {
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: cover;
	border-radius: var(--radius);
	display: block;
}

/*--------------------------------------------------------------
# Posts and pages
--------------------------------------------------------------*/
.sticky { display: block; }
.updated:not(.published) { display: none; }
.page-content, .entry-content, .entry-summary { margin: 1.5rem 0 0; }
.page-links { clear: both; margin: 0 0 1.5rem; }

/* Text-based page (classic editor / no blocks) */
.gp-text-page {
	padding: 3rem 0 4rem;
}

.entry-header { margin-bottom: 1.5rem; }
.entry-title { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.entry-meta { color: var(--nhs-mid-grey); font-size: 0.875rem; margin-bottom: 1rem; }
.entry-footer { color: var(--nhs-mid-grey); font-size: 0.875rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--nhs-pale-grey); }

/* Block-based page — no global max-width; each block controls its own width */
.gp-block-page { margin: 0; padding: 0; }

/*
 * CONTENT-WIDTH blocks — custom GP blocks that sit within the text flow.
 * These are contained and centred at --container-max.
 */
.gp-block-page .entry-content > .gp-accordion-item,
.gp-block-page .entry-content > .breadcrumbs,
.gp-block-page .entry-content > .gp-register-sidebar {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	box-sizing: border-box;
}

/*
 * CONTENT-WIDTH — core WordPress blocks in ANY entry-content area.
 * Safe to omit .gp-block-page prefix because front-page.php outputs
 * the_content() directly without an .entry-content wrapper, so home
 * page blocks are never affected.
 * alignfull / alignwide blocks override this and go edge-to-edge.
 */
.entry-content > .wp-block-heading,
.entry-content > .wp-block-paragraph,
.entry-content > .wp-block-list,
.entry-content > .wp-block-buttons,
.entry-content > .wp-block-quote,
.entry-content > .wp-block-table,
.entry-content > .wp-block-separator,
.entry-content > .wp-block-image:not(.alignfull):not(.alignwide),
.entry-content > .wp-block-group:not(.alignfull):not(.alignwide),
.entry-content > .wp-block-columns:not(.alignfull) {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
	box-sizing: border-box;
}

/*
 * FULL-WIDTH blocks — GP section blocks that are already full-width sections.
 * Hero, featured panel, map, careers banner have no internal container,
 * so they span full viewport width naturally.
 * All other GP section blocks (contact, services, etc.) manage their own
 * .container internally.
 */

/*--------------------------------------------------------------
# Comments
--------------------------------------------------------------*/
.comment-content a { word-wrap: break-word; }
.bypostauthor { display: block; }

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget { margin: 0 0 1.5rem; }
.widget select { max-width: 100%; }

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

.custom-logo-link { display: inline-block; }
.wp-caption { margin-bottom: 1.5rem; max-width: 100%; }
.wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; }
.wp-caption .wp-caption-text { margin: 0.8rem 0; }
.wp-caption-text { text-align: center; }

/*--------------------------------------------------------------
# Galleries
--------------------------------------------------------------*/
.gallery { margin-bottom: 1.5rem; display: grid; gap: 1.5rem; }
.gallery-item { display: inline-block; text-align: center; width: 100%; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }
.gallery-caption { display: block; }

/*--------------------------------------------------------------
# Plugins — Jetpack
--------------------------------------------------------------*/
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer { display: none; }
.infinity-end.neverending .site-footer { display: block; }

/*--------------------------------------------------------------
# Utilities — Accessibility
--------------------------------------------------------------*/
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

#primary[tabindex="-1"]:focus { outline: 0; }

/* Post navigation */
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation { margin: 0 0 1.5rem; }

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links { display: flex; }

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous { flex: 1 0 50%; }

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next { text-align: end; flex: 1 0 50%; }

/*--------------------------------------------------------------
# Utilities — Alignments
--------------------------------------------------------------*/
.alignleft {
	/*rtl:ignore*/
	float: left;
	/*rtl:ignore*/
	margin-right: 1.5rem;
	margin-bottom: 1.5rem;
}

.alignright {
	/*rtl:ignore*/
	float: right;
	/*rtl:ignore*/
	margin-left: 1.5rem;
	margin-bottom: 1.5rem;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5rem;
}






/* =========================
   ABOUT HERO
========================= */
.about-hero {
  width: 100%;
  position: relative;
}

.about-hero-bg {
  width: 100%;
  min-height: 480px;
  background-image: url('http://localhost/gp-general-practices/wp-content/uploads/2026/05/about-banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: stretch;
}

.about-hero-inner {
  max-width: 1340px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
}

/* Blue content box — same logic as home */
.about-hero-box {
 background-color: var(--nhs-blue);
    padding: 36px 40px 40px 36px;
    margin-left: -100px;
    margin-bottom: -400px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 800px;
}

.about-hero-box h1 {
	margin: 0;
  color: #fff;
      font-size: 48px;
    line-height: 58px;
}


/* =========================
   RESPONSIVE — MOBILE
========================= */
@media (max-width: 768px) {
  .about-hero-bg {
    min-height: 280px;
  }
  .about-hero-box {
    margin-left: 0;
    margin-bottom: -170px;
    max-width: 100%;
  }
  .about-hero-box h1 {
    font-size: 34px;
    line-height: 46px;
  }
}

/* =========================
   ABOUT CONTENT SECTION
========================= */
.about-content {
  width: 100%;
  padding: 100px 0 80px; /* top increased because of overlap */
}

.about-container {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-container .breadcrumb{
  margin: 0;
}
.about-container .breadcrumb a{
  text-decoration: none;
}

.about-breadcrumb {
  margin-bottom: 8px;
}

.breadcrumb-sep{
	padding: 0 10px;
}

.about-text {
  max-width: 90%;
}


/* =========================
   EMPOWER SECTION
========================= */
.empower-section {
  width: 100%;
  padding: 80px 0;
}

.empower-inner {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.empower-grid {
  display: flex;
  width: 100%;
}

/* LEFT IMAGE */
.empower-img {
  width: 40%;
  min-height: 320px;
  background-image: url('http://localhost/gp-general-practices/wp-content/uploads/2026/06/health-checks.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* RIGHT CONTENT */
.empower-content {
      width: 60%;
    padding: 65px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
    height: 460px;
}

.empower-heading {
  color: #fff;
}

.empower-text {
  color: #fff;
  line-height: 36px;
  max-width: 520px;
}
/* =========================
   RESPONSIVE — MOBILE
========================= */
@media (max-width: 768px) {
  .empower-grid {
    flex-direction: column;
  }
  .empower-img{
    width: 100%;
  }
  .empower-content {
    width: 100%;
    height: auto;
    padding: 35px 20px;
  }
}




/* =========================
   MISSION SECTION
========================= */
.mission-section {
  width: 100%;
  padding: 30px 0 100px;
}

.mission-inner {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

/* left border accent style */
.mission-box {
  border-left: 8px solid var(--nhs-blue);
  padding: 20px 0 0px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mission-box .text-secondary{
  font-size: 20px;
  line-height: 38px;
 }


 /* =========================
   OUR STAFF SECTION
========================= */
.staff-section {
  width: 100%;
  padding: 56px 0 72px;
}

.staff-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.staff-heading {
  color: var(--text-main);
  margin-bottom: 28px;
}

.staff-acc-wrapper {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Each accordion item */
.staff-acc-item {
  border: 1px solid #d0d5d8;
  background: #fff;
  overflow: hidden;
}

/* Trigger button */
.staff-acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.staff-acc-btn:hover {
  background-color: rgba(0, 94, 184, 0.04);
}
.staff-acc-btn:focus{
	outline: none !important;
}

.staff-acc-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.staff-acc-label {
  color: var(--nhs-blue);
  font-family: 'Frutiger LT Pro', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Panel collapsed */
.staff-acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.staff-acc-panel-inner {
  border-top: 1px solid #d0d5d8;
  padding: 28px 24px 32px;
}

/* Staff grid — 2 col (item 1) */
.staff-grid--2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}

/* Staff grid — 8 col (items 2–5, 2 rows of 8) */
.staff-grid--8col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 16px;
}

/* Individual staff member */
.staff-member {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.staff-member-name {
  color: var(--text-main);
  font-family: 'Frutiger LT Pro', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.staff-member-role {
  color: var(--text-dark-grey);
  font-family: 'Frutiger LT Pro', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

/* =========================
   RESPONSIVE — TABLET
========================= */
@media (max-width: 1024px) {
  .staff-grid--8col {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .staff-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
   RESPONSIVE — MOBILE
========================= */
@media (max-width: 600px) {
  .staff-section {
    padding: 40px 0 48px;
  }

  .staff-acc-wrapper {
    gap: 16px;
  }

  .staff-acc-btn {
    padding: 16px;
    gap: 10px;
  }

  .staff-acc-label {
    font-size: 15px;
  }

  .staff-acc-panel-inner {
    padding: 20px 16px 24px;
  }

  .staff-grid--8col {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .staff-grid--2col {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .staff-member-name {
    font-size: 14px;
  }

  .staff-member-role {
    font-size: 13px;
  }
}



/* =========================
   CAREERS SECTION
========================= */
.careers-section {
  width: 100%;
}

.careers-inner {
  width: 100%;
}

.careers-grid {
  display: flex;
}

/* LEFT */
.careers-content {
  width: 60%;
  padding: 85px 56px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  color: #fff;
}
.career-content-box{
  width: 80%;
  display: flex;
    gap: 20px;
    flex-direction: column;
}

.career-content-box h3{
	color: #fff;
}

/* BUTTON */
.careers-btn {
  margin-top: 12px;
  background: #fff;
  color: var(--text-main);
  padding: 12px 18px;
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  border-radius: 4px;
  border: 2px solid rgba(0, 0, 0, 0.00);
  box-shadow: 0 4px 0 0 #212B32;
  font-size: 19px;
  font-weight: 700;
  line-height: 28px;
}

/* RIGHT IMAGE */
.careers-img {
  width: 40%;
  min-height: 420px;
  background-image: url('http://localhost/gp-general-practices/wp-content/uploads/2026/06/health-checkers.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.career-text{
  color: #fff;
}


/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px) {

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .careers-grid {
    flex-direction: column;
  }

  .careers-content,
  .careers-img {
    width: 100%;
  }

  .careers-img {
    min-height: 300px;
  }
  .career-content-box{
    width: 100%;
  }
}

@media (max-width: 640px) {

  .staff-grid {
    flex-direction: column;
    gap: 16px;
  }

  .grid-4 {
    grid-template-columns: 1fr;
  }

  .careers-content {
    padding: 40px 24px;
  }
  .career-content-box{
    width: 100%;
  }
}