/*-----------------------------------------------------------------------------------

	The App Chaps: phones, tablets and touch screens (2026-10-24)

	Loaded after style.css. The desktop design (980px and up, mouse) is untouched;
	everything here applies below 980px or on touch screens.

	Follows the BBC Global Experience Language (GEL):
	- Grid (bbc/gel-grid): 8px unit. Side margins 8px below 400px, 16px from 400px;
	  gutters 8px below 600px, 16px from 600px.
	- Type (bbc/gel-typography, group B = phones from 320px):
	  Trafalgar 24/28 (article titles), Double Pica 20/24 (page titles),
	  Great Primer 18/22 (headlines, section titles), Body Copy 16/22, Pica 16/20 (UI),
	  Long Primer 15/18 (summaries), Brevier 14/18 (meta, footer).
	- Touch targets at least 44x44px (BBC GEL, Apple HIG; WCAG 2.5.5 AAA); text colours
	  4.5:1 or better on their background (WCAG 1.4.3 AA).

	1.	Tokens
	2.	Nothing wider than the screen
	3.	Header & navigation
	4.	Title bars & banners
	5.	Body copy & post content
	6.	Post lists, meta & pagination
	7.	Cards (projects & news)
	8.	Portfolio filter buttons
	9.	Testimonials
	10.	Sidebar widgets & search
	11.	Forms
	12.	Case-study navigation
	13.	Footer

-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------*/
/*	1.	Tokens
/*-----------------------------------------------------------------------------------*/

:root {
	--gel-margin: 8px;
	--gel-gutter: 8px;
	--tac-ink: #3f3e3c;        /* headings, links */
	--tac-text: #333;          /* body copy */
	--tac-muted: #5f5e59;      /* meta, captions: 6.4:1 on white */
	--tac-rule: #e3e2dd;       /* dividers */
	--tac-dark: #2b3536;       /* title bars, selected buttons */
	--tac-target: 44px;        /* minimum touch target */
}

@media (min-width: 400px) { :root { --gel-margin: 16px; } }

@media (min-width: 600px) { :root { --gel-gutter: 16px; } }


/*-----------------------------------------------------------------------------------*/
/*	2.	Nothing wider than the screen
/*	The 567px logo and 900px+ post images made phones zoom the whole page out.
/*-----------------------------------------------------------------------------------*/

@media (max-width: 990px) {
	#logo img,
	.entry-content img,
	.entry-content video,
	.wp-caption {
		max-width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	.entry-content iframe,
	.entry-content embed,
	.entry-content object {
		max-width: 100%;
	}

	.entry-top,
	.entry-top.off,
	.full-width,
	.single-portfolio .slides_container,
	.single-portfolio .slides_container img,
	.single-portfolio .slides_container div,
	div.jp-audio,
	div.jp-video,
	.jp-video-play,
	div.jp-jplayer.jp-jplayer-video {
		width: auto !important;
		max-width: 100%;
	}

	.entry-top { float: none; }
}


/*-----------------------------------------------------------------------------------*/
/*	3.	Header & navigation
/*-----------------------------------------------------------------------------------*/

@media (max-width: 767px) {
	#header { padding: 0 var(--gel-margin); }

	#header-top { padding: 16px 0 0 0; }

	/* A compact logo, so the first screen is mostly content. */
	#logo {
		float: none;
		text-align: center;
	}

	#logo a {
		display: inline-block;
		padding: 4px 0;
	}

	#logo img {
		display: block;
		width: 240px;
		max-width: 100%;
		height: auto;
	}

	#header-caption { display: none; }

	/* Menu: one row of full-height tap targets, current page underlined (GEL Pica 16/20). */
	#primary-nav {
		float: none;
		margin: 8px 0 0 0;
	}

	#primary-nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 !important;
	}

	#primary-nav ul li {
		display: block;
		float: none;
		margin: 0;
	}

	#primary-nav ul li a {
		display: flex;
		align-items: center;
		min-height: var(--tac-target);
		box-sizing: border-box;
		padding: 0 10px;
		font-size: 15px;
		line-height: 20px;
		border-bottom: 3px solid transparent;
	}

	/* WordPress marks the blog page "current_page_parent" on every single post, portfolio items included. */
	#primary-nav ul li.current-menu-item > a,
	#primary-nav ul li.current_page_item > a,
	.single-post #primary-nav ul li.current_page_parent > a,
	#primary-nav ul li.current-menu-ancestor > a {
		border-bottom-color: var(--tac-dark);
	}
}


/*-----------------------------------------------------------------------------------*/
/*	4.	Title bars & banners
/*-----------------------------------------------------------------------------------*/

@media (max-width: 979px) {
	.header-bar { height: auto; }

	.page-title {
		padding: 16px var(--gel-margin);
		margin: 0 0 16px 0;
		font-size: 20px;
		line-height: 24px;
	}

	.header-bar h2 {
		margin: 0;
		padding: 18px var(--gel-margin);
		font-size: 18px;
		line-height: 22px;
	}

	#welcome-message h1 {
		padding: 16px var(--gel-margin);
		font-size: 18px;
		line-height: 24px;
	}

	#devices-container h2 {
		margin: 32px var(--gel-margin);
		font-size: 24px;
		line-height: 28px;
	}

	#primary,
	#sidebar { margin: 0 var(--gel-margin); }
}


/*-----------------------------------------------------------------------------------*/
/*	5.	Body copy & post content (GEL Body Copy 16/22)
/*-----------------------------------------------------------------------------------*/

@media (max-width: 979px) {
	.entry-content {
		font-size: 16px;
		line-height: 22px;
		color: var(--tac-text);
	}

	.entry-content p,
	.entry-content ul,
	.entry-content ol { margin-bottom: 16px; }

	.entry-content ul,
	.entry-content ol { margin-left: 24px; }

	.entry-content h2 {
		font-size: 20px;
		line-height: 24px;
		margin: 24px 0 8px 0;
	}

	.entry-content h3,
	.entry-content h4 {
		font-size: 18px;
		line-height: 22px;
		margin: 24px 0 8px 0;
	}

	/* Floated pictures leave a word stranded beside them on a phone; stack them instead. */
	.entry-content .alignleft,
	.entry-content .alignright,
	.entry-content img.alignleft,
	.entry-content img.alignright {
		float: none;
		display: block;
		margin: 0 auto 16px auto;
	}

	.entry-content .wp-caption,
	.entry-content figure {
		width: auto !important;
		margin: 0 0 16px 0;
	}

	.wp-caption-text,
	.entry-content figcaption {
		font-family: inherit;
		font-style: normal;
		font-size: 14px;
		line-height: 18px;
		color: var(--tac-muted);
		padding: 8px 0 0 0;
		text-align: left;
	}

	blockquote {
		margin: 0 0 16px 0;
		padding-left: 12px;
		font-size: 16px;
		line-height: 22px;
		color: var(--tac-muted);
	}

	.entry-content a { color: var(--tac-ink); }
}


/*-----------------------------------------------------------------------------------*/
/*	6.	Post lists, meta & pagination
/*-----------------------------------------------------------------------------------*/

@media (max-width: 979px) {
	.hentry { margin-bottom: 32px; }

	#primary > .hentry + .hentry {
		padding-top: 24px;
		border-top: 1px solid var(--tac-rule);
	}

	/* Article headline in lists (GEL Trafalgar 24/28). */
	#primary .entry-title,
	#primary .entry-title a {
		font-size: 24px;
		line-height: 28px;
	}

	#primary .entry-title { margin: 0 0 8px 0; }

	#primary .entry-title a {
		display: block;
		padding: 8px 0;        /* 44px tap target */
	}

	/* On a single post the title bar already shows the headline; the theme's copy is white-on-white. */
	.single-post #primary .entry-title { display: none; }

	.entry-seperator {
		width: auto;
		margin: 12px 0 16px 0;
	}

	/* Meta line (GEL Brevier 14/18). Links get 24px-tall targets (WCAG 2.5.8). */
	.entry-meta,
	.entry-meta a,
	.comment-meta,
	.comment-meta a {
		font-family: inherit;
		font-size: 14px;
		line-height: 18px;
		color: var(--tac-muted);
	}

	.entry-meta a {
		display: inline-block;
		padding: 3px 0;
	}

	/* "Older / newer entries" as buttons. */
	.page-navigation {
		display: flex;
		justify-content: space-between;
		gap: var(--gel-gutter);
		margin: 0 0 32px 0;
	}

	.page-navigation .nav-next,
	.page-navigation .nav-previous {
		float: none;
		margin: 0;
	}

	.page-navigation a {
		display: flex;
		align-items: center;
		min-height: var(--tac-target);
		box-sizing: border-box;
		padding: 0 16px;
		font-size: 16px;
		color: var(--tac-ink);
		background: #f4f3ef;
		border: 1px solid #dcdad3;
		border-radius: 4px;
	}
}


/*-----------------------------------------------------------------------------------*/
/*	7.	Cards (projects & news)
/*	After BBC GEL promos: image fills the column between the GEL margins at 16:9 with no
/*	frame; headline (Great Primer 18/22) and two-line summary (Long Primer 15/18) are
/*	left-aligned underneath. The whole card is one tap target. Every card is the same
/*	height, because the card-stack filter lays cards out by row.
/*-----------------------------------------------------------------------------------*/

@media (max-width: 979px) {
	.inner-wrap { padding: 0; }

	.side-content {
		float: none;
		width: auto;
		margin: 0;
		padding: 0 var(--gel-margin);
		text-align: left;
	}

	.side-content h2 {
		margin-left: calc(-1 * var(--gel-margin));
		padding-left: var(--gel-margin);
		font-size: 18px;
		line-height: 22px;
	}

	.side-content p {
		font-size: 16px;
		line-height: 22px;
	}

	.grid,
	.image-grid,
	.image-grid.grid {
		float: none;
		margin: 0 var(--gel-margin);
		padding: 0;
	}

	.grid li,
	.grid li.type-portfolio,
	.image-grid.grid li {
		position: relative;
		float: left;
		width: 100%;
		height: auto;
		margin: 0 0 24px 0;
		overflow: visible;
	}

	.grid li > .hentry { margin-bottom: 0; }

	.grid .post-thumb {
		position: relative;
		z-index: 2;            /* the picture keeps its own link (permalink or lightbox) */
		margin: 0 0 8px 0;
	}

	.grid .post-thumb a {
		padding: 0;
		background: none;
	}

	.grid .post-thumb img {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		border: 0;
	}

	.grid .post-thumb-overlay { display: none !important; }

	.grid .entry-title,
	.type-portfolio .entry-title {
		text-align: left;
		margin: 0 0 4px 0;
		line-height: 22px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.grid .entry-title a {
		font-size: 18px;
		line-height: 22px;
	}

	/* The headline link covers the whole card. */
	.grid .entry-title a::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	.grid .entry-excerpt,
	.type-portfolio .entry-excerpt {
		text-align: left;
		font-size: 15px;
		line-height: 18px;
		color: var(--tac-muted);
		height: 36px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.grid .entry-excerpt p {
		margin: 0;
		font-size: inherit;
		font-weight: normal;
	}

	.grid .entry-meta { margin: 0 0 4px 0; }

	/* portfolio_bg.gif draws a divider every 246px to match the desktop rows. */
	#portfolio-bg {
		background: none;
		padding-top: 0;
	}

	/* The theme tucks the grid 25px up under the title bar; on the portfolio and skill-type pages
	   that overlaps the bar. */
	.container:has(> #portfolio-filter) #portfolio-bg,
	.page-title-bar + .container #portfolio-bg { margin-top: 0; }
}

/* Two cards per row from 600px, with a GEL gutter between them. CSS Grid rather than floats with
   nth-child margins: the filter hides cards with `hidden`, which nth-child would still count. */
@media (min-width: 600px) and (max-width: 979px) {
	.grid,
	.image-grid.grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--gel-gutter);
		align-content: start;    /* while the filter holds the grid's height, rows mustn't stretch to fill it */
	}

	.grid::after,
	.image-grid::after { content: none; }    /* the clearfix would take a grid cell */

	.grid li,
	.grid li.type-portfolio,
	.image-grid.grid li {
		float: none;
		width: auto;
	}
}


/*-----------------------------------------------------------------------------------*/
/*	8.	Portfolio filter buttons
/*-----------------------------------------------------------------------------------*/

/* Buttons on phones, tablets and anything driven by touch. */
@media (max-width: 767px), (pointer: coarse) {
	#portfolio-filter {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		margin: 0 var(--gel-margin) 30px var(--gel-margin);
		padding: 0;
	}

	#portfolio-filter li {
		display: block;
		margin: 0;
	}

	#portfolio-filter li:first-child {
		flex-basis: 100%;
		text-align: center;
		font-size: 14px;
		color: var(--tac-muted);
	}

	#portfolio-filter .sep,
	#portfolio-filter .border { display: none; }

	#portfolio-filter a {
		display: block;
		min-height: var(--tac-target);
		box-sizing: border-box;
		padding: 12px 16px;
		font-size: 15px;
		line-height: 20px;
		color: var(--tac-ink);
		background: #f4f3ef;
		border: 1px solid #dcdad3;
		border-radius: 22px;
		-webkit-tap-highlight-color: transparent;
	}

	#portfolio-filter a:active { background: #e8e6df; }

	/* The chosen filter (aria-pressed is set by js/portfolio-filter.js; li.active before it runs). */
	#portfolio-filter li.active a,
	#portfolio-filter a[aria-pressed="true"] {
		background: var(--tac-dark);
		border-color: var(--tac-dark);
		color: #fff;
		font-weight: normal;
		text-decoration: none;
	}
}

/* Phones: filters above the grid, in one row that scrolls sideways. */
@media (max-width: 767px) {
	.container:has(> #portfolio-filter) {
		display: flex;
		flex-direction: column;
	}

	.container > #portfolio-filter {
		order: -1;
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 0 24px 0;
		padding: 0 var(--gel-margin);
		scroll-padding: 0 var(--gel-margin);
	}

	.container > #portfolio-filter::-webkit-scrollbar { display: none; }

	.container > #portfolio-filter li { flex: 0 0 auto; }

	.container > #portfolio-filter li:first-child {
		flex-basis: auto;
		align-self: center;
		padding-right: 4px;
	}

	.container > #portfolio-filter a { white-space: nowrap; }
}


/*-----------------------------------------------------------------------------------*/
/*	9.	Testimonials
/*	On phones the quotes inside the slider images are about 6px tall; show the text
/*	version from template-home.php instead.
/*-----------------------------------------------------------------------------------*/

@media (max-width: 767px) {
	#testimonial-slider { display: none; }

	#testimonials-text {
		position: static !important;
		width: auto;
		height: auto;
		margin: 32px 0 0 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}

	.testimonial {
		margin: 24px var(--gel-margin) 32px var(--gel-margin);
		padding: 0 0 0 12px;
		border-left: 4px solid var(--tac-dark);
	}

	.testimonial blockquote {
		margin: 0;
		padding: 0;
		border: 0;
		font-family: inherit;
		font-style: normal;
		font-size: 16px;
		line-height: 22px;
		color: var(--tac-text);
	}

	.testimonial blockquote p {
		margin: 0 0 12px 0;
		font-weight: normal;   /* the home page otherwise inherits bold here */
	}

	.testimonial .testimonial-pull {
		font-size: 20px;
		line-height: 24px;
		font-weight: bold;
		color: var(--tac-ink);
	}

	.testimonial figcaption {
		font-size: 14px;
		line-height: 18px;
		color: var(--tac-muted);
	}

	.testimonial figcaption a {
		display: inline-block;
		padding: 3px 0;
		color: var(--tac-ink);
		border-bottom: 1px solid #bfbfbf;
	}
}


/*-----------------------------------------------------------------------------------*/
/*	10.	Sidebar widgets & search
/*	Lists become full-width rows (Pica 16/20) with 44px+ targets and dividers.
/*-----------------------------------------------------------------------------------*/

@media (max-width: 979px) {
	#sidebar { clear: both; }

	/* Pages with an empty sidebar would otherwise show a stray rule. Only a truly empty one: case
	   studies put the project picture and description in #sidebar without any widgets. */
	#sidebar:not(:has(*)) { display: none; }

	#sidebar:has(.widget) {
		margin-top: 16px;
		padding-top: 8px;
		border-top: 1px solid var(--tac-rule);
	}

	.widget { margin: 0 0 24px 0; }

	.widget-title,
	#sidebar .widget-title {
		margin: 0;
		padding: 16px 0 8px 0;
		font-size: 18px;
		line-height: 22px;
		border-bottom: 1px solid var(--tac-rule);
	}

	.widget ul { margin: 0; }

	.widget li,
	.widget.widget_nav_menu li,
	.widget.widget_categories li,
	.widget.widget_archive li,
	.widget.widget_pages li {
		margin: 0;
		border-bottom: 1px solid var(--tac-rule);
	}

	#sidebar .widget li a,
	.widget li a {
		display: flex;
		align-items: center;
		min-height: var(--tac-target);
		box-sizing: border-box;
		padding: 12px 0;
		font-size: 16px;
		line-height: 20px;
		color: var(--tac-ink);
		border-bottom: 0;
	}

	/* Search: labelled field plus a real button (searchform.php). */
	#searchform,
	#searchform fieldset { margin: 0; }

	#searchform fieldset {
		display: flex;
		gap: 8px;
	}

	#s,
	.widget_search #s {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		height: 48px;
		margin: 0;
		box-sizing: border-box;
		padding: 0 12px;
		font-size: 16px;           /* 16px or more stops iOS zooming in on focus */
		color: var(--tac-text);
		border: 1px solid #8e8c84;
		border-radius: 4px;
		box-shadow: none;
		-webkit-appearance: none;
	}

	#searchform #searchsubmit,
	#searchform #searchsubmit:not(:focus) {
		position: static;
		width: auto;
		height: 48px;
		clip: auto;
		clip-path: none;
		overflow: visible;
		padding: 0 16px;
		font: bold 16px/20px "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #fff;
		background: var(--tac-dark);
		border: 0;
		border-radius: 4px;
	}

	.widget_search { margin-top: 16px; }
}


/*-----------------------------------------------------------------------------------*/
/*	11.	Forms (contact, comments)
/*-----------------------------------------------------------------------------------*/

@media (max-width: 979px) {
	.contactform,
	.entry-content ul.contactform { margin: 0 0 32px 0; }   /* the form is a list; no list indent */

	.contactform li label,
	#commentform label {
		font-size: 16px;
		line-height: 20px;
		margin: 0 0 8px 0;
	}

	.contactform li input[type="text"],
	.contactform li input[type="email"],
	.contactform li textarea,
	#commentform input[type="text"],
	#commentform input[type="email"],
	#commentform input[type="url"],
	#commentform textarea {
		width: 100%;
		max-width: none;
		min-height: 48px;
		box-sizing: border-box;
		margin: 0 0 16px 0;
		padding: 12px;
		font-size: 16px;
		line-height: 22px;
		border: 1px solid #8e8c84;
		border-radius: 4px;
		box-shadow: none;
		-webkit-appearance: none;
	}

	.contactform li textarea,
	#commentform textarea { min-height: 160px; }

	.contactform li button,
	.contactform button,
	#commentform #submit-button {
		float: none;
		height: auto;
		min-height: 48px;
		padding: 0 24px;
		font-size: 16px;
		line-height: 20px;
		color: #fff;
		background: var(--tac-dark);
		border: 0;
		border-radius: 4px;
		text-shadow: none;
		box-shadow: none;
	}

	label.error {
		display: block;
		font-size: 14px;
		color: #b3261e;
		margin: -8px 0 16px 0;
	}
}


/*-----------------------------------------------------------------------------------*/
/*	12.	Case-study navigation (previous / next arrows in the title bar)
/*-----------------------------------------------------------------------------------*/

@media (max-width: 979px) {
	.single-portfolio .navigation {
		top: 7px;
		right: var(--gel-margin);
		width: auto;
		height: var(--tac-target);
	}

	.single-portfolio .navigation div,
	.single-portfolio .navigation .nav-next {
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
	}

	.single-portfolio .navigation .nav-next { border-left: 1px solid rgba(255, 255, 255, 0.3); }

	/* Same arrow sprite, drawn in the content box of a 45x45 target. */
	.single-portfolio .navigation a,
	.single-portfolio .navigation .nav-next a {
		position: relative;
		padding: 15px 17px;
		margin: 0 !important;
		background-origin: content-box;
		background-clip: content-box;
	}
}


/*-----------------------------------------------------------------------------------*/
/*	13.	Footer (GEL Brevier 14/18)
/*-----------------------------------------------------------------------------------*/

@media (max-width: 979px) {
	#footer-callout { padding: 24px var(--gel-margin); }

	#footer { padding: 0 var(--gel-margin); }

	#footer .column {
		float: none;
		width: auto;
		margin: 0;
	}

	#footer-bottom {
		float: none;
		padding: 24px var(--gel-margin) 16px var(--gel-margin);
		font-size: 14px;
		line-height: 18px;
	}

	#footer-bottom .copyright,
	#footer-bottom .credit {
		float: none;
		text-align: left;
		margin: 0 0 16px 0;
	}
}