/*
Theme Name: Bucks County IT
Theme URI: https://buckscountyit.com/
Author: Kahnnect IT, LLC
Author URI: https://buckscountyit.com/
Description: Block theme for Bucks County IT, the Pennsylvania IT services practice of Kahnnect IT, LLC. Carries the previous site's stylesheet unchanged, with Bootstrap, Font Awesome, jQuery and Owl Carousel vendored locally so nothing loads from a third-party host.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bcit
Tags: full-site-editing, block-patterns, custom-logo, custom-menu, one-column, business

This file is deliberately small.

The design lives in assets/css/legacy-style.css and legacy-custom.css, which
are the previous site's own stylesheets, vendored as-is. Nothing here restates
a rule from those files - if a colour, size or spacing looks wrong, it is fixed
there or it was never right there either.

What is left below is only the seam between that stylesheet and WordPress:
markup WordPress emits that the old site never had.
*/

/* ==========================================================================
   1. WordPress block wrappers

   Patterns wrap their markup in a core/html block, and the block editor's
   layout classes add margins the old sections never had. These reset the
   wrapper to nothing so the vendored <section> rules govern the spacing.
   ========================================================================== */

/*
 * WordPress spaces top-level blocks with margin-block-start and the flow-layout
 * `> * + *` rule. The vendored design does not use either - it spaces things
 * with section padding and element margins - so every one of those is a gap the
 * old site never had. The most visible were between the header and the hero,
 * and between each homepage band.
 */
.wp-site-blocks > *,
.wp-block-template-part,
.wp-block-post-content,
.wp-block-group,
main.wp-block-group > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-site-blocks > * + *,
main.wp-block-group > * + *,
.wp-block-post-content > section + section {
	margin-block-start: 0;
}

/* The template-part wrapper is a positioning no-op; it must not become a
   containing block or the sticky header stops sticking. */
.wp-block-template-part {
	display: contents;
}

/*
 * core/post-content renders as <div class="entry-content wp-block-post-content">.
 * The vendored stylesheet has a rule for .entry-content - padding: 90px 0 110px
 * - written for a blog post body on a theme this design was derived from. The
 * old site never used the class, so no page it served carried that padding.
 *
 * Every template here supplies its own spacing: the page templates wrap the
 * content in a .service-page section, the homepage sections bring their own
 * padding, and single.html and index.html pad their <main>. So the rule lands
 * on top of spacing that is already correct - 90px above the homepage hero and
 * 110px of white before the footer, doubled again on a single post.
 *
 * The class is not removable without replacing the core block, so the padding
 * is taken back off it here. This is the one place it can be done without
 * editing the vendored sheet, which would break the blog styling the rule is
 * actually for.
 */
.wp-block-post-content.entry-content {
	padding: 0;
}

/* WordPress constrains block children to contentSize; the vendored sections
   bring their own .container, so a second constraint narrows them twice. */
.wp-site-blocks .is-layout-constrained > section,
.wp-block-post-content > section,
main.wp-block-group > section {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* ==========================================================================
   2. Admin bar

   The header is position:sticky, so for a logged-in user it otherwise slides
   under the admin bar.
   ========================================================================== */

.admin-bar .is-stuck.octf-main-header,
.admin-bar .is-stuck .octf-main-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* ==========================================================================
   3. Post content inside the legacy page sections

   Page content is rendered by core/post-content inside .service-page, which
   already supplies the section padding, so the block wrapper adds none.
   ========================================================================== */

.service-page .wp-block-post-content > *:last-child {
	margin-bottom: 0;
}

/* Images dropped into page content by the editor. The old site set these
   inline; wp-block-image needs telling. */
.wp-block-image img {
	max-width: 100%;
	height: auto;
}

.wp-block-image {
	margin-bottom: 20px;
}

/* ==========================================================================
   4. Forms rendered by the plugin shortcodes

   The contact form reuses the old .wpcf7 / .main-form styling, so only the
   pieces the old markup did not have are declared here.
   ========================================================================== */

.bcit-form button[type="submit"]:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ==========================================================================
   5. Accessibility helpers WordPress expects a theme to provide
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip-path: none;
	color: #2e3e98;
	display: block;
	font-size: 1rem;
	height: auto;
	left: 5px;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/*
 * WordPress emits the skip link for a block theme itself, with BOTH classes:
 * `skip-link screen-reader-text`. legacy-custom.css styles .skip-link as a navy
 * chip, and the rule above - loaded later, same specificity - would repaint it
 * white. This restores the intended treatment for that one element without
 * touching how .screen-reader-text behaves anywhere else.
 */
.skip-link.screen-reader-text:focus {
	background-color: #2e3e98;
	color: #fff;
	left: 8px;
	top: 8px;
	padding: 12px 20px;
	border-radius: 0 0 4px 0;
}

/* ==========================================================================
   6. Locations archive

   A page the old site never had - it published thirty town pages with no index
   linking them together.
   ========================================================================== */

.bcit-location-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 15px 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bcit-location-grid li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bcit-location-grid i {
	color: #f2481c;
}

/* ==========================================================================
   7. Logos

   The old site wrote its logo as a bare <img src="/images/logo.png" alt="...">
   with no dimension attributes. WordPress does not: wp_get_attachment_image()
   emits width and height taken from the uploaded file, and once a width
   attribute is present the vendored `height: 45px` rule sizes only one axis, so
   the mobile logo renders at the file's full width squashed into 45px of
   height. Restoring `width: auto` gives the intrinsic aspect ratio back.

   `height: auto` on the desktop logo does the same thing in the other
   direction, and max-width keeps a large upload from pushing the menu out of
   the header row.
   ========================================================================== */

#site-logo img,
.mobile_logo img {
	width: auto;
	max-width: 100%;
}

#site-logo img {
	height: auto;
	max-height: 60px;
}

/*
 * The mobile logo is centred rather than flush left.
 *
 * The vendored rule floats it left, which is what the old site did - but the
 * hamburger toggle is absolutely positioned at the right edge, so a left-flush
 * logo leaves the whole middle of the bar empty and the two controls read as
 * unrelated. Centring balances the bar against the toggle.
 *
 * The reserve for the toggle is symmetric: the toggle is absolutely positioned
 * out of flow, so padding on one side only would centre the logo in the space
 * left over beside it rather than on the page. Equal padding-inline of the
 * toggle's 26px plus its gutter keeps the logo on the container's true centre
 * while still guaranteeing it cannot collide with the toggle on a narrow
 * phone. Only inside the mobile header's breakpoint, because .header_mobile
 * does not exist above it.
 */
@media only screen and (max-width: 1024px) {
	.header_mobile .mlogo_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-inline: 42px;
	}

	.header_mobile .mlogo_wrapper .mobile_logo {
		float: none;
	}

	.header_mobile .mlogo_wrapper .mobile_logo img {
		height: 45px;
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}
}

/* ==========================================================================
   8. Locations band

   The homepage used to put the "Locations" heading in the first of four equal
   Bootstrap columns with the three county lists beside it. Two problems: the
   heading sat where a reader scanning the row expected a fourth county, and
   Philadelphia - one town where the others have fifteen - was left as a stub at
   a different height with nothing to line up against.

   The heading is now a header over the band and the counties are three equal
   cards below it. Equal-height cards make a one-town county read as a small
   card rather than a broken column.

   auto-fit with a minimum rather than a fixed column count: the grid drops to
   two across and then one on its own as the viewport narrows, instead of
   squeezing three columns onto a phone. Nothing here restates a rule from the
   vendored stylesheet - this is markup the previous site did not have.
   ========================================================================== */

.locations-heading {
	margin-bottom: 40px;
}

.locations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	align-items: stretch;
}

.locations-card {
	display: flex;
	flex-direction: column;
	padding: 28px 30px;
	border: 1px solid rgba(46, 62, 152, 0.12);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(42, 67, 113, 0.06);
}

.locations-card-title {
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(46, 62, 152, 0.12);
	font-size: 18px;
	line-height: 1.3;
	color: #2e3e98;
}

.locations-card-title i {
	margin-right: 8px;
	color: #f2481c;
}

/*
 * The vendored .city-names rules were written for a Bootstrap column. Inside a
 * card the list is the card's body, so it stretches to fill the height - which
 * is what keeps three cards of very different length looking deliberate.
 */
.locations-card .city-names {
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.locations-card .city-names li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 0;
	margin: 0 0 10px;
}

.locations-card .city-names li:last-child {
	margin-bottom: 0;
}

.locations-card .city-names i {
	color: #f2481c;
	font-size: 12px;
}

/* ==========================================================================
   9. Blog

   The purchased theme already styles .post-box, .widget-area, .page-pagination
   and the calendar table, so the listing, the sidebar and the pagination need
   nothing here. What is left is the handful of elements this site's blog has
   that the theme's demo did not: the search form WordPress emits, the tag row at
   the foot of a post, and the previous/next pair.
   ========================================================================== */

.post-box .entry-body > *:first-child {
	margin-top: 0;
}

/*
 * The sidebar column sits beside a list that can be many screens long. On
 * desktop it sticks, so the categories and the calendar are still reachable
 * halfway down a long archive; below the breakpoint the column stacks under the
 * list and stickiness would be meaningless.
 */
@media only screen and (min-width: 992px) {
	.sidebar-blog {
		position: sticky;
		top: 110px;
	}
}

@media only screen and (max-width: 991px) {
	.sidebar-blog {
		margin-top: 40px;
	}
}

/*
 * Nothing in the sidebar may exceed its column.
 *
 * The purchased theme sizes its own widgets and never had to cope with the
 * markup WordPress emits - a search form whose input carries a browser default
 * width of roughly 20 characters plus a button beside it, a tag list of
 * arbitrary words, or a calendar table that wants its natural width. Each of
 * those can push the column wider than the grid gives it, and on a phone that
 * pushes the whole page sideways.
 *
 * These are containment rules, not design: they change nothing when the content
 * already fits.
 */
.widget-area,
.widget-area .widget {
	min-width: 0;
	max-width: 100%;
}

.widget-area .widget img,
.widget-area .widget table,
.widget-area .widget input,
.widget-area .widget select {
	max-width: 100%;
	box-sizing: border-box;
}

.widget-area .widget a,
.widget-area .widget li {
	overflow-wrap: anywhere;
}

/*
 * Keep each recent-posts item's thumbnail inside its own item.
 *
 * .widget .recent-news .thumb is floated left by the vendored stylesheet, and
 * nothing there ever contains that float - the demo's items all carried enough
 * title text to clear it on their own. Here a post whose title and date are
 * shorter than the 100px thumbnail leaks the float past the end of its item,
 * and on the last item past the end of the list, so the Tags widget below wraps
 * alongside the leftover thumbnail instead of starting under the list.
 *
 * flow-root gives each item its own block formatting context, which contains
 * the float without the clipping that overflow: hidden would bring to a tag or
 * a focus ring that reaches past the edge.
 */
.widget .recent-news li {
	display: flow-root;
}

/*
 * The search form.
 *
 * searchform.php replaces core's markup so that the input and the button are the
 * two flex items - core wraps the input in a <label>, which makes the label the
 * flex item and leaves `flex: 1` on .search-field applying to something that is
 * not a flex child. The field then sits at the browser's default width for
 * type=search, which is wider than this column, and the button is pushed out of
 * the sidebar entirely.
 *
 * The label selector is kept below anyway: if the form is ever rendered by
 * something that does not use searchform.php - a core search block, a plugin -
 * the row still behaves.
 */
.search-form {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Whichever of the two is the actual flex item, it is the one that shrinks.
   min-width: 0 is what permits that - a flex item's default min-width is auto,
   which is the input's intrinsic width, and no amount of flex-shrink overrides
   it. This is the whole fix. */
.search-form > label,
.search-form .search-field {
	flex: 1 1 0;
	min-width: 0;
}

.search-form > label {
	display: block;
}

/* ...unless it is the visually-hidden label from searchform.php, which is taken
   out of the flow entirely by .screen-reader-text and must not be given a share
   of the row. */
.search-form > label.screen-reader-text {
	flex: 0 0 auto;
}

.search-form .search-field {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #e5e5e5;
	background: #f6f6f6;
	color: #1b1d21;
	box-sizing: border-box;
	/* Safari draws type=search with rounded ends and its own inner padding, and
	   ignores the box model until this is off. */
	-webkit-appearance: none;
	appearance: none;
}

.search-form .search-field:focus {
	border-color: #2e3e98;
	outline: none;
}

.search-form .search-submit {
	flex: 0 0 auto;
	min-width: 48px;
	padding: 12px 16px;
	border: none;
	background: #2e3e98;
	color: #fff;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.3s linear;
}

.search-form .search-submit:hover,
.search-form .search-submit:focus {
	background: #f2481c;
}

.search-form .search-submit:focus-visible {
	outline: 2px solid #43baff;
	outline-offset: 2px;
}

/*
 * Tags.
 *
 * The vendored .tagcloud rules are scoped to .widget, so they cover the sidebar
 * cloud and not the row at the foot of a post. Worse, the sitewide content-link
 * rule in legacy-custom.css paints any plain link navy - so post tags rendered
 * as a line of navy words rather than as chips. Both get the same chip here.
 *
 * The :not() pairs match that rule's specificity; they are not there because a
 * button is expected inside a tag list.
 */
.site-content .tagcloud a:not(.octf-btn):not([class*="btn"]),
.site-content .tagcloud a:not(.octf-btn):not([class*="btn"]):visited {
	display: inline-block;
	margin: 0 3px 10px;
	padding: 10px 12px;
	background: #f6f6f6;
	color: #1b1d21;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.site-content .tagcloud a:not(.octf-btn):not([class*="btn"]):hover,
.site-content .tagcloud a:not(.octf-btn):not([class*="btn"]):focus {
	background: #7141b1;
	color: #fff;
}

/* The category chips over a post's featured image are white on blue, and the
   sitewide link colour would otherwise repaint them navy-on-blue. */
.site-content .post-cat a:not(.octf-btn):not([class*="btn"]),
.site-content .post-cat a:not(.octf-btn):not([class*="btn"]):visited,
.site-content .post-cat a:not(.octf-btn):not([class*="btn"]):hover,
.site-content .post-cat a:not(.octf-btn):not([class*="btn"]):focus {
	color: #fff;
	text-decoration: none;
}

/* Same for the meta line, which the theme sets in purple. */
.site-content .entry-meta a:not(.octf-btn):not([class*="btn"]),
.site-content .entry-meta a:not(.octf-btn):not([class*="btn"]):visited {
	color: #7141b1;
	text-decoration: none;
}

.site-content .entry-meta a:not(.octf-btn):not([class*="btn"]):hover,
.site-content .entry-meta a:not(.octf-btn):not([class*="btn"]):focus {
	color: #43baff;
}

/* The calendar's own caption reads "January 2026" and is the widget's real
   heading; the theme centres the cells but leaves the caption unstyled. */
.widget_calendar table {
	width: 100%;
}

.widget_calendar caption {
	caption-side: top;
	padding: 0 0 10px;
	color: #2e3e98;
	font-weight: 700;
	text-align: center;
}

.widget_calendar td a {
	font-weight: 700;
	color: #f2481c;
}

/* The month links either side of the calendar grid. */
.widget_calendar .wp-calendar-nav {
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
	font-size: 13px;
}

.entry-tags {
	margin: 30px -3px 0;
	padding-top: 24px;
	border-top: 1px solid #e7e7e7;
}

/*
 * Previous/next. Two equal cards rather than a single line of text: the titles
 * are as long as any other post title, and a bare "Previous" tells the reader
 * nothing about what they would be going to.
 */
.post-navigation {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-bottom: 60px;
}

.post-navigation a {
	display: block;
	padding: 20px 24px;
	border: 1px solid #e7e7e7;
	background: #fff;
	transition: border-color 0.3s linear;
}

.post-navigation a:hover,
.post-navigation a:focus {
	border-color: #2e3e98;
}

.post-nav-next {
	text-align: right;
}

.post-nav-label {
	display: block;
	margin-bottom: 6px;
	color: #7141b1;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.post-nav-title {
	display: block;
	color: #1b1d21;
	font-weight: 700;
	line-height: 1.4;
}

.blog-pagination {
	margin-bottom: 60px;
}

/*
 * Post body typography.
 *
 * The purchased theme's blog demo was one or two short paragraphs per card, so
 * .inner-post only ever had to space a title, a line of meta and an excerpt. A
 * real article has headings, lists, quotes and images in it, and none of those
 * were given any relationship to each other - consecutive headings sat the same
 * distance apart as consecutive paragraphs, and a list ran straight into the
 * paragraph after it.
 *
 * The rhythm below is the usual one: space above a heading is larger than the
 * space below it, so a heading reads as belonging to what follows rather than
 * floating between two blocks.
 */
/*
 * EVERY selector below is prefixed with .post-box, and that is load-bearing.
 *
 * The vendored stylesheet sets `.post-box p { margin-bottom: 0 }` so its
 * excerpt-sized cards sit flush. That rule is (0,2,0); a plain `.entry-body p`
 * is also (0,2,0) but loads earlier in the cascade, so it loses and the article
 * renders as one unbroken wall of text with no gap between paragraphs at all.
 * `.post-box .entry-body p` is (0,3,0) and wins. Do not simplify these away.
 */
.post-box .entry-body {
	font-size: 17px;
	line-height: 1.75;
}

.post-box .entry-body > * {
	margin-top: 0;
	margin-bottom: 1.5em;
}

.post-box .entry-body > *:last-child {
	margin-bottom: 0;
}

/* Named explicitly as well as via `> *`, because a paragraph can also arrive
   wrapped in a block-editor group or a figure. */
.post-box .entry-body p {
	margin-bottom: 1.5em;
	line-height: 1.75;
}

.post-box .entry-body p:last-child {
	margin-bottom: 0;
}

/* Space above a heading is larger than the space below it, so the heading reads
   as belonging to what follows rather than floating between two blocks. */
.post-box .entry-body h2,
.post-box .entry-body h3,
.post-box .entry-body h4,
.post-box .entry-body h5 {
	margin-top: 2em;
	margin-bottom: 0.65em;
	line-height: 1.3;
}

.post-box .entry-body > h2:first-child,
.post-box .entry-body > h3:first-child,
.post-box .entry-body > h4:first-child {
	margin-top: 0;
}

.post-box .entry-body h2 {
	font-size: 28px;
}

.post-box .entry-body h3 {
	font-size: 22px;
}

.post-box .entry-body h4 {
	font-size: 19px;
}

/*
 * Lists. The vendored sheet strips the padding off ul across the site for its
 * own menus, so a list in an article loses its markers' indent as well as any
 * space between items - three bullets ended up looking like one paragraph with
 * dots in it.
 */
.post-box .entry-body ul,
.post-box .entry-body ol {
	margin-bottom: 1.5em;
	padding-left: 24px;
	list-style-position: outside;
}

.post-box .entry-body ul {
	list-style: disc;
}

.post-box .entry-body ol {
	list-style: decimal;
}

.post-box .entry-body li {
	margin-bottom: 0.7em;
	line-height: 1.7;
}

.post-box .entry-body li:last-child {
	margin-bottom: 0;
}

/* A nested list belongs to the item above it, so it is tighter than the gap
   between two top-level items. */
.post-box .entry-body li > ul,
.post-box .entry-body li > ol {
	margin-top: 0.7em;
	margin-bottom: 0;
}

.post-box .entry-body blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid #f2481c;
	color: #45464b;
	font-style: italic;
}

.post-box .entry-body img,
.post-box .entry-body figure {
	max-width: 100%;
	height: auto;
}

.post-box .entry-body figure {
	margin: 1.8em 0;
}

.post-box .entry-body figcaption {
	margin-top: 10px;
	color: #6b6d75;
	font-size: 14px;
}

/* Long, unbroken strings - a URL pasted into a paragraph, a file path in a
   code span - must wrap rather than widen the column. */
.post-box .entry-body a,
.post-box .entry-body code,
.post-box .entry-body pre {
	overflow-wrap: anywhere;
}

.post-box .entry-body pre {
	margin-bottom: 1.5em;
	padding: 18px 20px;
	overflow-x: auto;
	background: #f6f6f6;
	border: 1px solid #e7e7e7;
	font-size: 14px;
	line-height: 1.6;
}

.post-box .entry-body code {
	padding: 2px 6px;
	background: #f6f6f6;
	font-size: 0.9em;
}

.post-box .entry-body pre code {
	padding: 0;
	background: none;
	font-size: inherit;
}

/*
 * The listing card. The theme's 40px padding is right on a desktop column and
 * far too much of a narrow phone's width, so it eases off below the breakpoint -
 * on a 360px screen the original leaves 280px for the text.
 */
@media only screen and (max-width: 575px) {
	.post-box .inner-post,
	.post-box .padding-box {
		padding-left: 22px;
		padding-right: 22px;
	}

	.post-box .inner-post {
		padding-top: 28px;
		padding-bottom: 28px;
	}

	.post-box .entry-body {
		font-size: 16px;
	}
}

/* The excerpt in a card sits between the title and the button with no space of
   its own, because the theme zeroes .post-box p margins for its own layout. */
.post-box .inner-post > p {
	margin-bottom: 0;
	line-height: 1.7;
}

.post-box .entry-title {
	line-height: 1.3;
}