.navbar-brand img {
	max-width: 300px;
	max-height: 120px;
}

/* ---------------------------------------------------------------- forms
   The bought template already styles .contact-section .form-message.success and .error. What it has
   no rule for is a single field the visitor needs to go back to, or an outcome message on the
   newsletter, so those live here.
*/

.contact-form .form-control.error,
.newsletter-form .input-newsletter.error {
	border-color: #ff4d15;
	box-shadow: 0 0 0 1px rgba(255, 77, 21, .35);
}

/* The panels are empty until something is said, so they must not reserve space. Both are in the
   markup from the start rather than created on demand, because a screen reader only announces a
   live region that was already in the document when it was written to. */
.contact-section .form-message:empty,
.newsletter-message:empty {
	display: none;
}

/* The outcome of a submission is a headline and the sentence under it (the four
   FrontEnd.ContactForm.* resources). Either half may be missing, so each is a block in its own
   right rather than the two being separated by a <br/> that would be left dangling. */
.contact-section .form-message .form-message-title {
	display: block;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.contact-section .form-message .form-message-title + .form-message-body {
	margin-top: 4px;
}

.contact-section .form-message .form-message-body {
	display: block;
}

/* The panel is a solid green or red bar, and the template paints every anchor #404040 — which on
   that background is all but unreadable. A message is authored text, so it may well carry a link. */
.contact-section .form-message a {
	color: inherit;
	text-decoration: underline;
}

.contact-form .submit-btn.sending {
	opacity: .6;
	pointer-events: none;
}

.newsletter-message {
	margin-top: 12px;
	margin-bottom: 0;
	padding: 10px 15px;
	border-radius: 3px;
	color: #fff;
}

.newsletter-message.success {
	background-color: #03b103;
}

.newsletter-message.error {
	background-color: #ff4d15;
}

/* ---------------------------------------------------------------- inlined SVG icons
   An SVG uploaded as media is written into the page by the _MediaIcon partial rather than linked to,
   which is what puts its shapes within reach of these rules. The colour then comes from whatever
   `color` the surrounding block sets, so an icon set exported in black looks right on a dark band
   and a set exported in white looks right on a light one — the file no longer decides.

   Two things are deliberately left alone. fill="none" is how an outline icon says "draw the stroke,
   not the body", so overriding it would fill the icon in solid; and the sizing here exists because
   exported icons routinely carry width="512" height="512", which without it would render at 512px
   inside a 75px box.
*/

.svg-icon {
	display: block;
	line-height: 0;
}

/* Set on the root so anything the file leaves unstyled inherits it — a shape with no fill attribute
   otherwise defaults to black, which is the case that leaves an icon invisible on a dark band.
   Inheriting rather than selecting every descendant is what keeps a <g fill="none"> subtree intact:
   its children inherit the none, exactly as the file intended. */
.svg-icon svg {
	display: block;
	width: 100%;
	height: auto;
	fill: currentColor;
}

.svg-icon svg [fill]:not([fill="none" i]) {
	fill: currentColor;
}

.svg-icon svg [stroke]:not([stroke="none" i]) {
	stroke: currentColor;
}

/* ---------------------------------------------------------------- counter icons
   The band is #5c84eb and the template draws these white at half opacity (see .counter-icon in
   style.css), so white is what an inlined icon has to inherit.
*/

.counter-icon {
	color: #ffffff;
}

/* ---------------------------------------------------------------- rich-text lists
   style.css resets `dl, ol, ul` to `list-style: none; padding: 0`, and for the template itself that
   is right: almost every list it ships is a menu, a meta line or a gallery — markup that happens to
   be a <ul>. The one place a list really is a list is a body an editor writes in the control panel,
   and there the reset silently swallowed the bullets and the numbers.

   Turning the reset off wholesale would bullet the navbar, so instead every rich-text body is
   wrapped in .rich-text and the markers come back only inside it. That scoping is what keeps the
   entry-meta line and the .wp-block-gallery — both of which sit inside .article-content next to the
   body — and the .features-list inside .overview-content looking as the template drew them.

   Padding has to be restored along with the marker: the reset zeroes it, and an outside marker with
   no indent to hang in is clipped at the edge of the column.
*/

.rich-text ul,
.rich-text ol {
	padding-left: 20px;
	margin-bottom: 15px;
}

.rich-text ul {
	list-style: disc outside;
}

.rich-text ol {
	list-style: decimal outside;
}

/* The browser default for a bare <li> is none of these, so an authored bullet would otherwise read
   a size and a colour apart from the paragraphs it sits between. Values are the `p` rule in
   style.css, deliberately — the list is body copy that happens to be itemised. */
.rich-text li {
	color: #5f5f5f;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.2px;
	margin-bottom: 5px;
}

/* Nesting: the marker has to change at each level or a sub-list is indistinguishable from a break in
   the parent one. These are the browser's own defaults, which the shorthand above overrode. */
.rich-text ul ul {
	list-style-type: circle;
}

.rich-text ul ul ul {
	list-style-type: square;
}

.rich-text ol ol {
	list-style-type: lower-alpha;
}

.rich-text ol ol ol {
	list-style-type: lower-roman;
}

/* A nested list closes its parent item, so the 15px belongs after the outer list, not inside it. */
.rich-text li > ul,
.rich-text li > ol {
	margin-top: 5px;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- rich-text links
   The template paints every anchor #404040 and only reveals the accent on hover, which works for a
   menu entry or a card title — those are recognisable from where they sit. An anchor inside a
   paragraph has nothing to sit in: at #404040 it is the same colour as the sentence around it
   (#5f5f5f), so a visitor only finds it by sweeping the mouse across the text.

   #7b68ee is the template's own accent, so an authored link reads as one at rest, and the underline
   appears on hover to confirm what the pointer has found.

   Worth knowing: at rest the link is then distinguished from the sentence around it by colour alone,
   which is the one cue a reader who cannot separate the two hues has no access to. Moving the
   underline to the resting state rather than the hover state is the fix if that ever matters here.

   Scoped to .rich-text on purpose — every anchor in here is one an editor typed. Applying it site-wide
   would repaint the navbar, the footer columns and every card title too.
*/

.rich-text a {
	color: #7b68ee;
	text-decoration: none;
	text-underline-offset: 2px;
	/* Named rather than the template's bare `transition: 0.4s` on every anchor, which means `all`
	   and so animates the focus ring below — it faded in from 0 to 2px over the full 400ms, long
	   enough that a keyboard visitor tabbing through a paragraph of links never sees a whole one.
	   Colour is the only thing here worth easing. */
	transition: color 0.4s;
}

.rich-text a:hover,
.rich-text a:focus-visible {
	color: #7b68ee;
	text-decoration: underline;
}

/* The template clears the focus ring globally (`outline: 0 !important` on a), so without this a
   keyboard visitor has only the underline to go on — the same cue the mouse gets on hover, and one
   that says nothing about which element the keyboard is actually on. */
.rich-text a:focus-visible {
	outline: 2px solid #7b68ee !important;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- page title band
   The band's photograph is authored per page ("page-title-image"), falling back to the one on the
   home page ("default-page-title-image"), and _PageTitle writes the winner as an inline style. The
   template's own `background-image: url(../img/page-title-bg.jpg)` (see .page-title-area in
   style.css) has to give way, or a page with no photograph of its own would still show the stock
   one — which is exactly the static image the property exists to replace.

   Overridden here rather than deleted from style.css so the bought template stays as its author
   shipped it. Nothing extra is fetched either way: a browser only downloads the declaration that
   wins, so the stock file is requested on no page at all.

   The colour is the wash the band already lays over its photograph (.page-title-area::before), so a
   site that has authored neither image gets a deliberate dark panel with its heading legible on it,
   rather than white text on white. It also fills the band while a large photograph is still loading.
*/

.page-title-area {
	background-image: none;
	background-color: #030821;
}

/* ---------------------------------------------------------------- service page gallery
   The template's two-column figure grid is scoped to `.blog-details-desc .article-content`
   (style.css, and the single-column override in responsive.css), but Services.cshtml renders the
   same `<ul class="wp-block-gallery columns-2">` inside `.overview-section`, where none of it
   matches — so those photos stacked one per row at the full container width instead of sitting
   two-up.

   Extending the selector here rather than moving the markup under `.article-content`: those
   ancestors carry the article's own margins and heading styles, which do not belong on a service
   page. The rules mirror the template's exactly, including the breakpoint at which it drops to one
   column, so the two galleries stay in step.
*/

.overview-section .wp-block-gallery.columns-2 {
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	list-style-type: none;
	margin-right: -10px;
	margin-left: -10px;
	margin-top: 30px;
	margin-bottom: 30px;
}

.overview-section .wp-block-gallery.columns-2 li {
	flex: 0 0 50%;
	max-width: 50%;
	padding-right: 10px;
	padding-left: 10px;
}

.overview-section .wp-block-gallery.columns-2 li figure {
	margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
	.overview-section .wp-block-gallery.columns-2 li {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 20px;
	}
	.overview-section .wp-block-gallery.columns-2 li:last-child {
		margin-bottom: 0;
	}
}

/* ---------------------------------------------------------------- logo bounds
   A logo is whatever shape it is, so it is served uncropped — which means nothing but CSS decides
   how big it lands. The template's own mark is 179 x 38, and `.navbar-brand img` above already caps
   the desktop header; the mobile header and the footer had no cap at all, so an editor who uploaded
   a 2000px logo got one rendered at up to 516px in the footer.

   Bounds rather than a fixed size, so a wider or taller mark still fits without being distorted.
*/

.rainbow-responsive-nav .logo img {
	max-width: 300px;
	max-height: 120px;
}

.footer-logo img {
	max-width: 240px;
	max-height: 90px;
}

/* ---------------------------------------------------------------- gallery intro
   The gallery page's own Name, Summary and Description, shown above the photos. It reuses
   .about-content so the heading and body match the about band's typography, but not
   .about-section — that band's shape-bg.png backdrop belongs to the home page's about block, and
   dragging it in would put a decorative wash behind a plain introduction.

   .about-content carries `margin-right: 30px` in style.css to hold itself off the image beside it
   (responsive.css already zeroes that below 992px). There is no image here, so at full width the
   margin is just an asymmetry against the container.
*/

.gallery-intro .about-content {
	margin-right: 0;
}

/* Both bands open with 100px of their own, so an intro followed straight by its photos would sit
   170px away from them. The gallery keeps its padding everywhere else — this only collapses the
   gap where the two are adjacent, which is exactly where the two blocks read as one. */
.gallery-intro + .portfolio-section {
	padding-top: 0;
}

/* ---------------------------------------------------------------- in-body gallery photos
   The photos below an article body are now the same component as the gallery page's tiles: the
   anchor carries .popup-img so magnific-popup opens the original, and .gallery-single-item so the
   accent wash and the film icon arrive on hover. Reusing the class rather than restating those
   rules is what keeps the two galleries from drifting apart.

   One thing does not carry over. .gallery-single-item ends with `margin-bottom: 30px`, which is the
   grid gap between rows of tiles on the gallery page. Here the spacing already belongs to the list
   item — the template sets `figure { margin-bottom: 0 }` deliberately — so the inherited margin
   would open a gap inside every figure instead.
*/

.wp-block-gallery .blocks-gallery-item .gallery-single-item {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- powered by
   The developer's credit in the right-hand half of the copyright bar, the same one the
   ElidiaOliveOil footer carries. The template never had a second column here, so everything the
   credit needs is below.

   Alignment follows the template's own copyright rules rather than a Bootstrap text-end utility:
   style.css right-aligns .copyright-area ul and responsive.css centres the whole band under 768px,
   where the two halves have stacked and a right-aligned credit would hang off the wrong edge.
   A utility class would win over that media query and strand it right-aligned.
*/

.copyright-area .powered-by {
	text-align: right;
}

/* The wordmark sits on the same line as the label, so it is centred against the text rather than
   dropped onto its baseline. style.css also rounds every image by 3px, which means nothing on a
   transparent logo but is not something to inherit by accident. Its max-width: 100% is inherited
   deliberately: it is what shrinks the logo instead of overflowing on a narrow screen. */
.copyright-area .powered-by img {
	vertical-align: text-bottom;
	border-radius: 0;
}

/* .copyright-area p a is 600 across the band, which is right for a link inside a sentence and too
   heavy for two words of label. The copyright line opposite is 400, and the credit is its pair. */
.copyright-area .powered-by .powered-by-text {
	font-weight: 400;
	margin-right: 5px;
}

/* When the legal links are configured they share this half, sitting above the credit — ul is
   margin-bottom: 0 in style.css, so the gap between the two has to come from here. */
.copyright-area ul + .powered-by {
	margin-top: 10px;
}

@media only screen and (max-width: 767px) {

	/* The band is centred at this width and the credit is no longer beside anything. */
	.copyright-area .powered-by {
		text-align: center;
	}
}

/* ---------------------------------------------------------------- file list
   The documents attached to a page, rendered by _FileList. The template has no component for this,
   so it is built from the pieces it does use: the accent for the icon, #eee for the rule, and the
   3px radius the gallery tiles carry.

   The row is the link, not a link inside a row — the whole strip is the target, which is easier to
   hit on a phone than a line of text and gives the hover something to happen to.
*/

.file-list {
	margin-top: 30px;
}

.file-list ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.file-list li + li {
	margin-top: 10px;
}

.file-list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid #eeeeee;
	border-radius: 3px;
	color: #404040;
	font-weight: 500;
	/* Named properties rather than the template's bare `transition: 0.4s`, which means `all` and so
	   animates the focus ring too — measured fading in from 0 to 2px over the full 400ms, which is
	   exactly the wrong behaviour for the one cue a keyboard visitor needs immediately. */
	transition: border-color 0.4s, background-color 0.4s, color 0.4s;
}

.file-list a:hover,
.file-list a:focus-visible {
	border-color: #7b68ee;
	background-color: #f6f5ff;
	color: #7b68ee;
}

/* The template clears the focus ring globally (`outline: 0 !important` on a), and a border colour
   alone is not enough to say which row the keyboard is on. */
.file-list a:focus-visible {
	outline: 2px solid #7b68ee !important;
	outline-offset: 2px;
}

/* Fixed width so the labels line up whatever mix of icons the page carries — a wide one and a
   narrow one otherwise leave the names ragged down the list. */
.file-list a i {
	flex: 0 0 auto;
	width: 24px;
	font-size: 22px;
	line-height: 1;
	text-align: center;
	color: #7b68ee;
}

/* A long file name wraps rather than pushing the row wider than its column. */
.file-list .file-name {
	min-width: 0;
	overflow-wrap: anywhere;
}