/*
Theme Name: Gisby Harrison Theme
Description: A WordPress theme for Gisby Harrison based on the Avada base theme.
Author: Brew.
Author URI: https://www.wearebrew.com/
Template: Avada
Version: 1.0.0
Text Domain: Avada
*/

/*
 * Post content rendered through an Avada Layout sits in a nested container, and a
 * nested container keeps Avada's 100%-width site padding without the negative margin
 * that cancels it:
 *
 *   .width-100 .fusion-fullwidth                     { --awb-padding-left: 30px }
 *   .width-100 .fusion-fullwidth                     { margin-left: -30px }
 *   .width-100 .fusion-fullwidth .fusion-fullwidth   { margin-left: 0 }
 *
 * so body copy on a service or person page sat 30px right of the layout's own title.
 * Zero it for containers inside the Content element only. The `.width-100` prefix is
 * needed for weight: this stylesheet loads before Avada's compiled CSS, so a two-class
 * selector would lose the tie on source order. Padding an editor sets on a container is
 * written inline by Avada and still wins over this.
 */
.width-100 .fusion-content-tb .fusion-fullwidth {
	--awb-padding-left: 0px;
	--awb-padding-right: 0px;
}

/*
 * Breadcrumb bar.
 *
 * Rendered by gh_render_breadcrumbs() above the main container, reusing Avada's own
 * `.fusion-breadcrumbs` markup. Avada styles that class site-wide, not just inside the
 * page title bar, so the separator, colours and font size all still come from
 * Options → Extra → Breadcrumbs and nothing needs restating here. Only the bar's own
 * placement is ours.
 */
.gh-breadcrumb-bar {
	padding: 16px var(--hundredp_padding, 30px);
}

/*
 * Line the bar up with the content column below it. The bar sits outside #main, so it
 * cannot inherit that width. Avada widens a container's inner row by its 4% column
 * gutter and each column then pads back half of that, so the two cancel and the text
 * column comes out at exactly the site width, centred — measured, not assumed:
 * scripts/measure.mjs puts the heading and this bar on the same left edge to within
 * 0.05px from 1600px down to 768px.
 */
.gh-breadcrumb-bar__inner {
	max-width: var(--site_width, 1170px);
	margin: 0 auto;
}

/*
 * "Back to <parent service>" link, output by the [gh_parent_service] shortcode in the
 * Single Service layout. The arrow is a separate span so it can be nudged without moving
 * the text, and it sits inside the link so the whole thing is one target.
 */
.gh-parent-service {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	font-size: var(--breadcrumbs_font_size, 14px);
}

.gh-parent-service__arrow {
	transition: transform 0.2s ease;
}

.gh-parent-service:hover .gh-parent-service__arrow {
	transform: translateX(-0.2em);
}

/*
 * Category archive hero, output by gh_render_archive_hero(). It reproduces the Avada
 * slider used on the News page, which cannot be attached to an archive: the slider is
 * chosen through page meta, and its heading is fixed text rather than the term name.
 *
 * The figures come from measuring the real slider rather than from Avada's slider
 * options. Height tracks it exactly — 400px above 800px wide, then 50vw, which matches
 * the slider's measured 384px at 768 and 240px at 480. The heading is the one
 * approximation: Avada scales it continuously in JS from its typography-sensitivity
 * setting, so a clamp is used instead, which is within ~2.5px across the range.
 */
.gh-archive-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	height: min(400px, 50vw);
	padding: 0 30px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}

.gh-archive-hero__title {
	margin: 0;
	color: #fff;
	font-size: clamp(24px, 4.7vw, 36px);
	line-height: 1.2;
	text-transform: uppercase;
}

/* The slider's separator: 1px, 170px wide, with 20px above and 10px below. */
.gh-archive-hero__rule {
	width: 170px;
	margin: 20px auto 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.gh-archive-hero__caption {
	color: #fff;
	font-size: 18px;
	line-height: 1.2;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
 * Hero scrims.
 *
 * No daylight photograph carries white heading type unaided. Measured against
 * the replacement photographs, every hero landed between 1.00:1 and 1.64:1
 * against a 4.5:1 target before this was added — a single patch of sky inside
 * the heading box is enough to blow it. That is precisely why the Avada demo
 * banners were all dark-tinted to begin with.
 *
 * A Fusion Slider slide has no overlay control of its own, so the darkening
 * lives here rather than being burnt into the files on disk: one value to tune,
 * the photographs stay untouched and reusable, and the slider heroes and the
 * child theme's own archive hero get the same treatment.
 *
 * Verify with: node scripts/contrast.mjs <path> --region .fusion-slider-container
 * -------------------------------------------------------------------------- */

:root {
	/* Edge darkening, and the reinforcement behind the centred text block. A flat
	   veil heavy enough to hold the headings would have to run near 0.80 and would
	   flatten the photographs; weighting it where the type actually sits keeps the
	   edges of the picture alive. */
	--gh-hero-scrim-edge: rgba(20, 24, 30, 0.55);
	--gh-hero-scrim-core: rgba(20, 24, 30, 0.86);
	--gh-hero-scrim: radial-gradient(
		ellipse 62% 78% at 50% 46%,
		var(--gh-hero-scrim-core) 0%,
		var(--gh-hero-scrim-core) 28%,
		var(--gh-hero-scrim-edge) 78%,
		var(--gh-hero-scrim-edge) 100%
	);
}

/* The slide's photograph and its caption are siblings: the caption container is
   absolutely positioned at z-index 5, the picture sits at 2. An ::after on the
   picture therefore covers the image and stays under the text. */
.tfs-slider .slides > li > .background-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gh-hero-scrim);
	pointer-events: none;
}

.gh-archive-hero {
	position: relative;
}

.gh-archive-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gh-hero-scrim);
	pointer-events: none;
}

/* Lift the heading back above the scrim. */
.gh-archive-hero__content {
	position: relative;
}

/* -----------------------------------------------------------------------------
 * Tables in body copy.
 *
 * Avada styles no plain `<table>` in content. Its stylesheet carries `.table-1` and
 * `.table-2`, but those are opt-in classes an editor has to remember to type into the
 * markup — so anything the client writes or pastes lands with browser default styling:
 * no borders, no padding, headers centred and bold and nothing else. The Cookie Policy's
 * two cookie tables are the first real ones on the site and made that obvious.
 *
 * Styled on the bare element rather than a class, for the same reason: this has to work
 * for a table the client adds in two years without reading anything first.
 *
 * Colours come from the Avada palette rather than being written out, so the tables
 * follow Options → Colors like everything else. For reference at the time of writing:
 * color2 #f0f3f5, color3 #dfe2e3, color7 #3b4251, color1 #ffffff.
 * -------------------------------------------------------------------------- */

.fusion-text table,
.post-content table {
	width: 100%;
	margin-bottom: 1.5em;
	border-collapse: collapse;
	/* Avada's own table helpers do the same, and it is what stops a wide table
	   pushing the page sideways on a phone. The table still shrink-wraps to the
	   column, so this only engages when the content genuinely cannot fit. */
	display: block;
	overflow-x: auto;
}

.fusion-text table th,
.fusion-text table td,
.post-content table th,
.post-content table td {
	padding: 12px 16px;
	text-align: left;
	/* Rows in these tables are uneven — a two-word cookie name beside a sentence of
	   explanation — so cells align to their tops rather than floating in the middle. */
	vertical-align: top;
	border-bottom: 1px solid var(--awb-color3, #dfe2e3);
	/* What actually makes the table scroll on a phone rather than crush. The
	   overflow-x above turns the table into a scroll container for the anonymous table
	   box inside it; giving the cells a floor makes that inner box wider than the
	   screen, so it scrolls sideways instead of squeezing every column down to one word
	   per line. Setting min-width on the table itself does the opposite of what is
	   wanted — the element would overflow its parent and push the whole page sideways.

	   12em is measured, not picked. On a 390px screen the Cookie Policy table comes out
	   762px tall at 8em, 650 at 10em, 510 at 11em, 482 at 12em and 398 at 14em: past
	   12em the gain flattens while the sideways scroll keeps growing, and below it the
	   prose column collapses towards one word per line. Four columns at this floor still
	   fit a desktop content column without scrolling. */
	min-width: 12em;
}

.fusion-text table thead th,
.post-content table thead th {
	background-color: var(--awb-color7, #3b4251);
	color: var(--awb-color1, #ffffff);
	font-size: 0.85em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	/* The header supplies its own contrast; a second line under it is noise. */
	border-bottom: none;
}

/* Banding rather than vertical rules: it does the same job of tracking the eye across
   a wide row, without adding lines to a page that is mostly prose. */
.fusion-text table tbody tr:nth-child(even),
.post-content table tbody tr:nth-child(even) {
	background-color: var(--awb-color2, #f0f3f5);
}

.fusion-text table tbody tr:last-child th,
.fusion-text table tbody tr:last-child td,
.post-content table tbody tr:last-child th,
.post-content table tbody tr:last-child td {
	border-bottom: none;
}

/* A row header, where a table has one — the first column acting as a label. */
.fusion-text table tbody th,
.post-content table tbody th {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Footer legal row: the copyright line and the SRA digital badge.
   Built by scripts/setup-footer-badge.php as a container below the rest of the
   footer, so these rules only ever apply there.
   --------------------------------------------------------------------------- */

/* The badge sits at its drawn size, 275x163, and no larger — scaled up it is a blurry
   iframe rather than a bigger badge. The width has to be a definite length, not 100%:
   the frame below is a padding-ratio box whose only child is absolutely positioned, so
   it contributes nothing to its parent's width, and a percentage resolved against a
   shrink-to-fit flex item collapses the whole badge to zero. max-width lets it shrink
   below 275px on a narrow screen. */
.gh-sra-badge {
	width: 275px;
	max-width: 100%;
}

/* The vendor's aspect-ratio box, kept as a padding hack rather than modernised to
   `aspect-ratio`. The iframe's content is drawn by the SRA's CDN at a fixed ratio, and
   163/275 = 59.1% is the number their embed ships; anything else letterboxes the badge
   inside its own frame. */
.gh-sra-badge__frame {
	position: relative;
	height: 0;
	padding-bottom: 59.1%;
	overflow: hidden;
}

.gh-sra-badge__frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
}

/* Narrow, the pair stacks: badge first, copyright last, both centred.

   column-reverse rather than `order` on the badge, and a breakpoint rather than leaving
   the row to wrap on its own. The row's natural wrap point is wherever the copyright
   happens to stop fitting beside a 275px badge — measured at ~880px today, and a
   different number the moment the wording changes. Left to wrap, the stack would appear
   at a width the rules here did not, and the two would disagree in a band no one thinks
   to check. Forcing the direction at 900px, just above where it would wrap anyway, makes
   one breakpoint govern the whole change.

   The selector is Avada's own, with the container's class added on the front. Avada sets
   the direction with

     .fusion-flex-container .fusion-row .fusion-flex-column
       .fusion-column-wrapper:not(.fusion-flex-column-wrapper-legacy).fusion-content-layout-row
       { flex-direction: row }

   which is six classes deep, and its compiled stylesheet loads *after* the child theme's
   — so a shorter selector here loses on specificity and a matching one loses on order.
   Prefixing the container class makes it seven and settles it without !important.

   The gap rides along in the same rule for the same reason: Avada drives column gaps
   through --awb-column-gap / --awb-row-gap custom properties, so a plain `gap` in a
   two-class selector is overwritten by its variable-based one. It is only wanted here in
   any case — the desktop row is spaced by space-between, not by a gap. */
@media (max-width: 900px) {
	.fusion-flex-container.gh-footer-legal .fusion-row .fusion-flex-column .fusion-column-wrapper:not(.fusion-flex-column-wrapper-legacy).fusion-content-layout-row {
		flex-direction: column-reverse;
		align-items: center;
		justify-content: center;
		gap: 16px;
	}

	/* Centred with the stack, not at Avada's own medium/small breakpoints — the Text
	   element carries no content_alignment_medium/small for that reason. */
	.gh-footer-legal .gh-footer-legal__text {
		text-align: center;
	}

	/* Stacked, the menu's last row and the icons below it are all but touching — a 5px
	   box gap at 899px and a 5px overlap at 390px, where Avada's own small-screen rule
	   zeroes the column's bottom margin. What looks like clearance is only the menu
	   items' 40px height, and it disappears entirely on the narrowest screens. This is a
	   real margin between the two blocks. Set on the column rather than through
	   --awb-margin-bottom-small: that property is written into the element's inline
	   style, which a stylesheet cannot outbid, and it switches at Avada's breakpoint
	   rather than this one. */
	.fusion-layout-column.fusion-flex-column.gh-footer-contact {
		margin-bottom: 24px;
	}

	/* The social icons sit in their own column and so miss the rules above, but they
	   are part of the same stack and would otherwise be the one thing still pinned to an
	   edge. Overriding text-align rather than the --awb-alignment custom property that
	   feeds it: Avada writes that property into the element's inline style, and an inline
	   custom property cannot be outbid from a stylesheet. */
	.fusion-footer .fusion-social-links,
	.fusion-footer .fusion-social-links .fusion-social-networks {
		text-align: center;
	}
}

/* The row above the legal one — the phone number at one end, the secondary menu at the
   other — has the same problem at the same width, and takes the same treatment. Left
   alone it keeps both ends on one line however narrow the screen gets, so the number
   ends up floating halfway down beside a six-item stacked menu. Stacked and centred, it
   reads as a footer rather than as two columns that failed to line up.

   `column`, not `column-reverse`: here the phone number is the thing to lead with. The
   selector is Avada's again, with .gh-footer-contact (set by scripts/setup-footer-menu.php)
   spliced in at the column — see the note on .gh-footer-legal above for why it has to be
   this long. */
@media (max-width: 900px) {
	.fusion-flex-container .fusion-row .fusion-flex-column.gh-footer-contact .fusion-column-wrapper:not(.fusion-flex-column-wrapper-legacy).fusion-content-layout-row {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 24px;
	}
}

/* Keep the secondary menu flat wherever Avada collapses it.

   Below its mobile breakpoint Avada turns the menu into one item per row, full-width,
   each with a rule under it — the pattern for a collapsed primary navigation, which is
   not what this is: six short legal links reading as a line of small print. Flat and
   wrapping, they take two or three lines instead of six and stop competing with the
   phone number above them.

   No media query. Avada's own script adds `collapse-enabled` at the menu's breakpoint,
   which is 1024px here and is a setting someone can change — a matching `max-width` in
   this file would be a second copy of that number, silently wrong the moment the two
   disagree. Hanging the rules off the class instead means they apply exactly when the
   collapsed layout does, and never touch the desktop menu. (They did disagree: an
   earlier 900px query left the menu stacked between 901px and 1024px.)

   !important is not decoration here. Avada's rule is

     .awb-menu.collapse-enabled ul { flex-direction: column !important; ... }

   and !important can only be answered in kind; no amount of extra specificity reaches
   it. The same goes for the item margins. Everything that can be overridden normally —
   the wrapping, the centring, the borders — is left without it. */
.gh-footer-secondary.awb-menu.collapse-enabled .awb-menu__main-ul {
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
}

.gh-footer-secondary.awb-menu.collapse-enabled .awb-menu__main-li {
	width: auto;
	margin: 0 !important;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Sub-service links inside a service card.
 *
 * Rendered by `[gh_child_services]` on the Services page's card design, so that a
 * listing of the seven practice areas still shows what sits beneath each one.
 *
 * Set at the card's own body size rather than smaller: these are links a visitor is
 * meant to use, and shrinking them to mark them as a second level made them hard to
 * read and small to tap. The indent carries that job instead, and the body colour
 * keeps them from competing with the card's heading — the accent arrives on hover,
 * where it says "this is a link" at the moment that matters.
 * ------------------------------------------------------------------------ */

.gh-service-links {
	list-style: none;
	margin: 12px 0 0;
	padding-left: 16px;
	line-height: 1.7;
}

.gh-service-links li {
	margin: 0;
	padding: 0;
}

.gh-service-links a {
	color: var(--awb-color6, #6c6f70);
}

.gh-service-links a:hover,
.gh-service-links a:focus {
	color: var(--awb-color5, #e37222);
}

/* ---------------------------------------------------------------------------
 * Article cards: the category tag, where it says nothing.
 *
 * The Article Card carries the article's category, which is what tells the areas
 * apart on the News page. In the two blocks that are already scoped to a single
 * service area — "Latest Articles" on a service page, "More articles" in a post's
 * sidebar — every card necessarily carries the same tag as the page around it, so
 * it repeats the heading above it and adds nothing.
 *
 * It is worse than merely redundant on a sub-service page: articles are filed
 * against top-level areas, so a sub-service's articles are tagged with the parent's
 * name, which invites the reader to wonder whether they are misfiled.
 *
 * Hidden rather than removed, and hidden by the class the blocks already carry, so
 * there is only one Article Card design for the client to think about.
 * ------------------------------------------------------------------------ */

.gh-service-articles .fusion-meta-tb {
	display: none;
}

/* ---------------------------------------------------------------------------
 * The header's search field — not currently in the build.
 *
 * Search itself works: the results layout, the searchable post types and the empty
 * state are all set up, and the box on the 404 page reaches it. What is not in the
 * build is a search field in the header, so this styles an element that is not there.
 *
 * Kept because the decision was to leave search out of the header for now rather than
 * to abandon it. To put it back: Avada Layouts -> Global Header, drop a Search element
 * into the utility bar's right-hand column, give it the class `gh-header-search`, and
 * set that column's Content Layout to Row with its alignment at the end so the field
 * sits beside the social icons.
 *
 * Constrained here rather than in the element, because the Search element fills its
 * column and the column is a third of the header wide — unconstrained it reads as the
 * most important thing on the page, which it is not.
 * ------------------------------------------------------------------------ */

.gh-header-search {
	width: 100%;
	max-width: 220px;
}

/* Narrow, the utility bar stacks and the field takes the width it is given. */
@media only screen and (max-width: 850px) {
	.gh-header-search {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
 * OpenStreetMap credit, under the office map screenshots (gh_osm_map_credit).
 * The image element's own bottom margin sits above this, so pull the credit up
 * against the map it belongs to and give the space back below it.
 * ------------------------------------------------------------------------ */

.gh-osm-credit {
	margin: -15px 0 25px;
	text-align: center;
	font-size: 0.8125rem;
	line-height: 1.4;
}