/*
Theme Name: Imagefarm
Theme URI: https://imagefarm.co.uk
Author: Imagefarm
Description: Single-client theme for imagefarm.co.uk. Fixed design, no options framework.
Version: 0.4.4
Requires PHP: 7.4
Text Domain: imagefarm
*/

/* -------------------------------------------------------------------------
 * Homepage product scroller
 * ---------------------------------------------------------------------- */
.latest-scrollable-posts {
	position: relative;
}

/* The old framework sized each tile at 625x460 and left .items at 280000px wide,
 * with its JS driving the scroll offset. Keeping those sizes reproduces the live
 * design exactly; only the overflow behaviour is added here. */
.latest-scrollable-posts .scrollable {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: thin;
}

.latest-scrollable-posts .post-block img {
	display: block;
	width: 100%;
	height: auto;
}

.latest-scrollable-posts .scrollable-prev,
.latest-scrollable-posts .scrollable-next {
	position: absolute;
	top: -34px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: var(--if-accent);
	color: var(--if-dark);
	font-size: 16px;
	line-height: 26px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	z-index: 4;
}

.latest-scrollable-posts .scrollable-prev::before {
	content: "\2039";
}

.latest-scrollable-posts .scrollable-next::before {
	content: "\203A";
}

.latest-scrollable-posts .scrollable-prev {
	right: 34px;
}

.latest-scrollable-posts .scrollable-next {
	right: 0;
}

/* -------------------------------------------------------------------------
 * Design tokens
 * ---------------------------------------------------------------------- */
:root {
	--if-accent: #abcf47;
	--if-heading: #454545;
	--if-body: #888888;
	--if-border: #e3e3e3;
	--if-dark: #2b2f36;
	--if-dark-2: #262a30;
	--if-wrap: 1020px;
	--if-font-body: "Open Sans", Helvetica, Arial, sans-serif;
	--if-font-display: "Sanchez", Georgia, serif;
}

/* -------------------------------------------------------------------------
 * Hero slider
 * ---------------------------------------------------------------------- */
.if-hero {
	position: relative;
	width: 100%;
	max-width: 980px;
	margin: 0 auto 30px;
	overflow: hidden;
	background: #111;
}

.if-hero__slides {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	padding-top: 45.9%; /* 450 / 980 */
}

.if-hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.if-hero__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.if-hero__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.if-hero__desc {
	position: absolute;
	left: 0;
	top: 1px;
	width: 30%;
	height: 100%;
	box-sizing: border-box;
	padding: 15% 24px 24px;
	background: rgba(0, 0, 0, 0.45);
}

.if-hero__desc h2 {
	margin: 0 0 12px;
	padding: 0;
	color: #fff;
	font-family: "Bree Serif", Georgia, serif;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.05;
	text-align: left;
}

.if-hero__desc p {
	margin: 0;
	color: #fff;
	font-family: var(--if-font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.8;
	text-align: left;
}

.if-hero__nav {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: flex;
	gap: 8px;
	z-index: 5;
}

.if-hero__nav button {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.if-hero__nav button:hover,
.if-hero__nav button:focus-visible {
	background: var(--if-accent);
	color: var(--if-dark);
}

.if-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 5;
}

.if-hero__dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.if-hero__dots button.is-active {
	background: var(--if-accent);
}

/* -------------------------------------------------------------------------
 * Homepage four-column blocks
 * Typography comes from the ported stylesheet — overriding it here drifted
 * away from production (22px/700 vs the live 24px/400), so nothing is set.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Typography — ported verbatim from the <style> block the old framework
 * injected at runtime from its options panel. Without it the site falls back
 * to Helvetica Neue at 14px, which is visibly wrong next to production.
 * ---------------------------------------------------------------------- */
body,
.content {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-style: normal;
}

.blurb-text,
.custom-title,
.if-hero__desc h2 {
	font-family: "Bree Serif", Helvetica, Arial, sans-serif;
}

.content h1 { font-size: 28px; }
.content h2 { font-size: 24px; }
.content h3 { font-size: 20px; }
.content h4 { font-size: 16px; }
.content h5 { font-size: 18px; }
.content h6 { font-size: 14px; }

.single-post div.title h1 {
	font-size: 30px;
}

/* Featured image above the content.
 * The old theme served pre-cropped derivatives sized to the column, so the image
 * always filled it. Rendered WordPress sizes carry a width attribute equal to
 * the file width, and the legacy stylesheet only applies max-width:100%, which
 * never scales an image up. Force the column width instead, as production does. */
div.single-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* -------------------------------------------------------------------------
 * Fonts
 * The old framework injected the "custom font" (Sanchez) at runtime from its
 * options panel. Nothing defines .custom-font in the ported CSS, so it is
 * declared here, along with the intro font (Bree Serif) used by the blurb.
 * ---------------------------------------------------------------------- */
.custom-font {
	font-family: var(--if-font-display);
}

.blurb-wrapper h3.blurb-text {
	font-family: "Bree Serif", Georgia, serif;
}

/* Blurb / intro text
 * The legacy stylesheet sets opacity:0 and relied on the old JS to animate it in.
 * There is no such JS any more, so reveal it. Sizing/alignment stays as designed. */
.blurb-wrapper h3.blurb-text,
.blurb-wrapper .blurb-secondary-text {
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Product tabs (replaces [titantabs])
 * ---------------------------------------------------------------------- */
/* Production's tab block is 10px taller than the sum of the strip and the panel
 * content: its container traps the panel's trailing 10px margin. flow-root does
 * the same here without clipping the tabs, and keeps everything below — the
 * prev/next links and the footer — in step with production. */
.if-tabs {
        display: flow-root;
        margin: 0;
}

.if-tabs__list {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        margin: 0 0 20px;
        padding: 0;
        list-style: none;
        border-bottom: 1px solid #ddd;
}

.if-tabs__list li {
        margin-bottom: -1px;
}

/* Production's tabs come from Bootstrap: 8px/12px padding, body weight, and a
 * white "tab" with a 1px border on the selected item. Inactive labels are the
 * lime accent colour. */
.if-tabs__list button {
        padding: 8px 12px;
        border: 1px solid transparent;
        border-radius: 4px 4px 0 0;
        background: none;
        color: var(--if-accent);
        font-family: var(--if-font-body);
        font-size: 13px;
        font-weight: 400;
        line-height: 20px;
        cursor: pointer;
}

.if-tabs__list button[aria-selected="true"] {
        color: #555;
        background: #fff;
        border-color: #ddd;
        border-bottom-color: transparent;
}

.if-tabs__panel {
        padding: 0;
        color: var(--if-body);
        font-size: 13px;
        line-height: 1.8;
}

/* wpautop leaves an empty paragraph where the shortcodes were split apart. */
.if-tabs__panel > p:empty {
        display: none;
}

.if-tabs__panel[hidden] {
	display: none;
}

.if-tabs__panel h6 {
	margin: 0 0 10px;
	color: var(--if-heading);
	font-size: 13px;
	font-weight: 700;
}

/* Production keeps <em> inline inside tab panels — it only carries the italic
 * style. Forcing a block here made every emphasised run its own line and pushed
 * the tab block up to 230px taller than production on the cheese range. */
.if-tabs__panel em {
	color: var(--if-body);
	font-style: italic;
}

/* -------------------------------------------------------------------------
 * Header navigation
 * The 1px divider below the menu lives on `.top-area .skeleton` (ported CSS).
 * Spacing must therefore sit OUTSIDE that element, otherwise the 40px pushes
 * the rule down against the hero and it disappears behind the image.
 *
 * Scoped to the homepage only: interior pages put the page title directly
 * under the rule on production (0px gap), so padding there looked wrong.
 * ---------------------------------------------------------------------- */
/* Production has a 40px gap between the header block and the hero. It belongs
 * to the hero, not the header: putting it on .top-area (as padding, or as a
 * margin) moved the mobile menu select down by 40px at every width below the
 * desktop breakpoint. On the hero it leaves the header box and the mobile menu
 * exactly where production has them. */
.home .if-hero {
	margin-top: 40px;
}

/* The logo was an <h1> in the old theme, so it inherited the base h1 margin
 * (10px top and bottom). It is a <div> here for heading semantics, so the
 * margin has to be restored explicitly or the header is 20px shorter. */
#logo {
	margin: 10px 0;
}

/* In-page sliders (Factory, Innovations) */
.if-hero--page {
	margin: 0 0 20px;
}

/* A slider standing in for a post's featured image sits inside
 * div.page_featured_slider, which the ported CSS already gives a 20px bottom
 * margin. Drop the inner one so the gap stays at the 20px the wrapper asked
 * for, then add the extra 10px production ends up with between the slider and
 * the post body (its slider markup carries a 10px trailing margin of its own). */
.page_featured_slider .if-hero--page {
        margin-bottom: 0;
}

.single-post .page_featured_slider {
        margin-bottom: 30px;
}

/* -------------------------------------------------------------------------
 * Nav dropdowns
 * The ported CSS sets .sub-menu { display: none }. Production revealed the
 * dropdowns with its "menu-algorithm" JavaScript; here it is plain CSS, and
 * :focus-within keeps them usable from the keyboard.
 * ---------------------------------------------------------------------- */
#menu li:hover > .sub-menu,
#menu li:focus-within > .sub-menu {
	display: block;
}

#menu .sub-menu li:hover > .sub-menu,
#menu .sub-menu li:focus-within > .sub-menu {
	display: block;
	top: 0;
	left: 100%;
}

/* -------------------------------------------------------------------------
 * reCAPTCHA badge
 * Google injects a fixed-position badge at the bottom right. `.super-wrapper`
 * is position:relative with z-index:3, which creates a stacking context, so
 * the badge (z-index:auto = 0) was painting *behind* the page. Production has
 * the same defect.
 * ---------------------------------------------------------------------- */
.grecaptcha-badge {
	z-index: 1000 !important;
}

/* -------------------------------------------------------------------------
 * Product cards (category / search / archive listings)
 *
 * The old theme laid these out with Isotope + jQuery, which set inline widths.
 * Without it the <li> elements collapse to full width. The card styling itself
 * is in the ported CSS; only the 2-column flow is restored here.
 * ---------------------------------------------------------------------- */
#main-content ul.posts {
	margin: 0;
	padding: 0;
	list-style: none;
}

#main-content ul.posts > li {
	float: left;
	width: 300px;
	margin: 0 40px 40px 0;
	padding: 0;
	list-style: none;
}

#main-content ul.posts > li:nth-child(2n) {
	margin-right: 0;
}

#main-content ul.posts > li .imageholder-wrapper {
	border-top: 3px solid var(--if-accent);
	margin-bottom: 10px;
	width: auto;
	position: relative;
}

#main-content ul.posts > li .imageholder-wrapper img {
	display: block;
	width: 100%;
	height: auto;
}

#main-content ul.posts > li h2 {
	margin: 0 0 8px;
	padding: 0;
	background: none;
	font-weight: 400;
	text-transform: none;
}

#main-content ul.posts > li h2 a {
	color: var(--if-accent);
	font-size: 18px;
	line-height: 1.2;
	display: block;
}

#main-content ul.posts > li h2 a:hover {
	color: var(--if-heading);
	text-decoration: none;
}

#main-content ul.posts > li .description p {
	margin: 0 0 10px;
	color: var(--if-body);
	font-size: 13px;
	line-height: 1.8;
}

#main-content ul.posts > li .read-more {
	display: inline-block;
	color: var(--if-heading);
	font-size: 12px;
	text-decoration: none;
}

#main-content ul.posts > li .read-more:hover {
	color: var(--if-accent);
}

@media (max-width: 767px) {
	#main-content ul.posts > li,
	#main-content ul.posts > li:nth-child(2n) {
		float: none;
		width: 100%;
		margin: 0 0 30px;
	}
}

/* -------------------------------------------------------------------------
 * Sidebar contact form
 * Production's form paragraphs and submit button render in the display font;
 * the old framework added those classes to widget output at runtime.
 * ---------------------------------------------------------------------- */
#sidebar .wpcf7 {
	margin: 0;
	padding: 0;
}

#sidebar .wpcf7 p,
#sidebar .wpcf7 label,
#sidebar .wpcf7 .wpcf7-submit {
	font-family: var(--if-font-display);
}

/* CF7 6 puts the submit button in its own <p>. On production the button floated
 * out and that paragraph contributed no height, so the block underneath started
 * 73px higher. Neutralise the extra height here. */
#sidebar .wpcf7 p:has(> .wpcf7-submit) {
	height: 0;
	margin: 0;
	overflow: visible;
}

/* -------------------------------------------------------------------------
 * Small fixes
 * ---------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--if-accent);
	color: var(--if-dark);
}

/* -------------------------------------------------------------------------
 * Cookie notice
 * Same geometry as the cookieconsent2 bar production loaded from cdnjs:
 * a black full-width bar with the licence-yellow button.
 * ---------------------------------------------------------------------- */
.if-cookie {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 16px 28.8px;
        background: #000;
        color: #fff;
        font-family: Helvetica, Calibri, Arial, sans-serif;
        font-size: 16px;
        line-height: 1.6;
}

.if-cookie[hidden] {
        display: none;
}

.if-cookie__message {
        flex: 1 1 auto;
        margin: 0;
}

.if-cookie__message a {
        color: #fff;
        text-decoration: underline;
}

.if-cookie__action {
        flex: 0 0 auto;
        margin: 0;
}

.if-cookie__btn {
        padding: 5.76px 11.52px;
        border: 0;
        border-radius: 0;
        background: #f1d600;
        color: #000;
        font-family: inherit;
        font-size: 14.4px;
        font-weight: 700;
        line-height: 2;
        cursor: pointer;
}