/*
Theme Name: Christian Advertising Network
Template: hello-elementor
Author: The Brandesign group
Description: A child theme for Christian Advertising Network
Version: 2.11.0
*/

/*
CHANGELOG
2.6 — Replaced the service_category taxonomy's 13 terms (used by Job
      Opportunities) with a new 23-term set matched to an uploaded "CAN
      Icon" set in the Media Library (icons 13-35, one per category,
      matched by direct visual inspection, not guessed from filenames).
      "Cleaning services" and "Other" were kept (identical name already
      existed / no equivalent in the new 23 respectively) rather than
      deleted and recreated; the 3 real posts using since-removed terms
      (2x "Gardening and landscaping", 1x "Building and maintenance")
      were remapped to their closest new equivalent first. Each new
      term's matched icon is stored as termmeta ('category_icon',
      attachment ID) and also registered as a proper JetEngine media
      field on the taxonomy (previously undeclared) so it's editable
      from the term's wp-admin screen, not just set via this one-off
      migration. The Job Opportunities single page's service_category
      fact now shows that real icon instead of the generic tag SVG
      (adv_directory_resolve_post_fact_icon_image() in
      advertising-directory-post-types.php, wired into the facts loop in
      advertising-directory-single-post.php) — falls back to the generic
      icon for any term without one (i.e. "Other"). The Post Job
      Opportunities form's category dropdown and the grid card's
      subtitle both needed no code changes — both already read the
      taxonomy generically rather than hardcoding term names.
2.5 — Courses (only) get a second homepage card layout, matching a
      supplied mockup: image inset with padding on a light-grey card
      body instead of edge-to-edge with a footer strip, the submitting
      organisation's name (read live from their profile via the new
      adv_directory_post_author_organisation_name(), not copied onto the
      post — stays in sync if they update it later), a trimmed
      description excerpt, and a full-width button instead of a pill on
      the right. No star rating — that was a generic-template artifact
      in the mockup, not something this site tracks. [adv_directory_courses]
      now also defaults to columns=3 rows=1 (a single swipeable row of
      3) instead of the 2x2 every other type uses, still overridable via
      the existing atts. New config keys in
      advertising-directory-post-types.php ('card_style',
      'card_show_organisation', 'card_show_description',
      'default_columns', 'default_rows') are opt-in per post type, so
      Events/Jobs/Marketplace are unaffected — see
      adv_directory_render_post_grid_card_inset() in
      advertising-directory-post-grid.php.
2.4 — Generalised the Events homepage grid + single-page system (v2.3)
      to all four posting-tab content types, since building it 4 separate
      times would have meant re-fixing the same two bugs 2.3 found
      (missing .adv-directory-meta-icon sizing, HTML getting escaped
      instead of rendered) in four places instead of one. New shortcodes:
      [adv_directory_events], [adv_directory_courses], [adv_directory_jobs],
      [adv_directory_marketplace] (same columns/rows/limit atts as
      before). New single-{post_type}.php templates: single-courses.php,
      single-job_opportunities.php, single-market-place.php (single-events.php
      now a 1-line wrapper too). Config (which meta fields to show, their
      icons, description field, headings) lives in one place per type —
      php-files/advertising-directory-post-types.php — while the actual
      grid rendering (advertising-directory-post-grid.php,
      advertising-directory-post-grid.js) and single-page rendering
      (advertising-directory-single-post.php) are shared. Notable per-type
      differences the config handles: Job Opportunities shows its
      service_category taxonomy terms (not a meta field) as a fact via a
      'taxonomy' fact type alongside the plain 'meta_key' ones, and its
      card subtitle is the category list rather than a date (jobs have no
      date field); Marketplace's card subtitle is the seller's name for
      the same reason. Added tag/briefcase/person icons to
      adv_directory_meta_icon_svg() in advertising-directory-listing.php
      for these. Renamed the CSS classes accordingly
      (.adv-directory-post-grid / __post-card / __post-single) and moved
      them from the old per-shortcode dynamic <style> block into style.css
      globally, since 4 static single-{type}.php templates need them and
      have no such block of their own — same reasoning as the
      .adv-directory-back-link and .adv-directory-meta-icon moves in 2.3.
2.3 — New public "Events" grid shortcode: [adv_directory_events
      columns="2" rows="2" limit="-1"]. Shows every published `events`
      post as an image-banner card (title in blue, date/time line,
      pill-shaped "View Details" button), laid out via Swiper's Grid
      module (columns x rows cards per page) reusing the same bundled
      Swiper copy the business-listings carousel uses — but with
      pagination dots instead of prev/next arrows, since it's meant to
      sit as a compact block (e.g. on the homepage) rather than a full
      carousel. See php-files/advertising-directory-events-grid.php and
      javascript-files/advertising-directory-events-grid.js. One real
      bug found and fixed along the way: bdthemes-element-pack's bundled
      UIkit CSS ships a bare "a{color:inherit !important}" reset that
      silently wins over a plain (non-!important) color rule on any
      link regardless of the link's own selector specificity — the
      button's white text needed !important to survive it. Cards are
      equal height regardless of title length: Swiper's Grid module
      doesn't equalize slide heights on its own (confirmed by testing —
      a one-word title next to a full-sentence one came out ~190px
      apart), so the title is line-clamped to 2 lines with a matching
      min-height and the date/time line always renders (even empty) with
      its own min-height, the same line-clamp approach already used
      elsewhere on this site (business listing cards) for the same
      problem. Also added single-events.php: a real single-{post_type}.php
      template (neither this theme nor Hello Elementor shipped anything
      more specific than the bare index.php fallback before, so events
      rendered with an empty default view — all of an event's info lives
      in postmeta, not post_content). Shows every field the Post an Event
      form collects — date/time/location/contact as an icon+label fact
      list, then the full description — reusing the same profile-card
      look and meta-icon system already built for the Business/Church
      Profile page (extended adv_directory_meta_icon_svg() with
      calendar/clock icons for it). Moved .adv-directory-back-link's CSS
      out of the business-listing shortcode's dynamic <style> block and
      into this file, since single-events.php is a plain template with
      no such block of its own and needs that class too.
2.2 — Restyled the whole My Account area to the CAN design system: the
      nav sidebar, content card, form fields/buttons across every tab
      (Dashboard, Business Profile, Orders/Addresses/Account Details,
      and all four posting tabs). Two third-party stylesheets needed
      real investigation, not guesswork, since My Account is built with
      Elementor Pro's "WooCommerce My Account" widget rather than the
      plain WooCommerce template: (1) the widget's own generated CSS
      reads a large set of CSS custom properties for its colours
      (--tabs-active-color etc.) with muted grey/cyan fallbacks that
      nothing overrode — now set to the CAN palette on
      .elementor-widget-woocommerce-my-account; (2) Gravity Forms 2.9's
      bundled "Orbital" framework CSS turned out to have a genuinely
      empty/corrupted gravity-forms-orbital-theme.min.css on this
      install (0 bytes) — traced instead to
      gravity-forms-theme-framework.min.css, whose form-control reset
      rule keeps a few real classes outside its otherwise-:where()-wrapped
      selector, giving it higher specificity than a plain
      ".gform_wrapper .gform_button" chain; !important on the specific
      properties that matter was the pragmatic fix, documented inline.
      Also: posting-tab.php now renders its own heading + one-line
      description (from a new 'description' key per tab in
      adv_directory_get_posting_tabs()) instead of Gravity Forms' raw
      form title ("Market place form" etc., title="false"
      description="false" on the shortcode now). A third gap from the
      same framework CSS: .gform_fields is laid out as a CSS grid with
      its own 40px row-gap, stacking on top of each field's own
      margin-bottom for ~60px between fields — forced back to
      display:block + gap:0 (both !important) with a tighter 16px
      margin-bottom per field and 4px under each label.
2.1 — New "Post an Event" My Account tab (post-event endpoint, Gravity
      Forms form 6 "Event Form") added to adv_directory_get_posting_tabs()
      in advertising-directory-posting-tabs.php, same approval-gated
      pattern as the other three posting tabs (bumped
      ADV_DIRECTORY_POSTING_TABS_VERSION so the new endpoint's rewrite
      rule flushes). Submissions create a DRAFT `events` post via the
      shared adv_directory_handle_gf_submission() dispatcher. Field map
      (Event name -> post title, Event date -> date, Event time -> time,
      Event location -> location, Event description -> event_description,
      Event details -> contact_details) matches the events post type's
      JetEngine meta fields exactly -- "Event details" maps to
      contact_details because that field was cloned from Job
      Opportunities' "Job contact details" field (same internal
      layoutGroupId) and just relabelled. See
      php-files/advertising-directory-event-submissions.php. Also added
      an "Events" section to the Business/Church Profile detail page,
      reusing the 'event' card type already built for this post type.
2.0 — Post On Marketplace (form 4) submissions now create a DRAFT
      `market-place` post, same pattern as Job Opportunities and Post
      Advertiser Course: gated on
      adv_directory_posting_tabs_user_is_approved(), routed through the
      shared adv_directory_handle_gf_submission() dispatcher. Field map
      (Advert title -> post title + advert_title, Seller's name ->
      seller039s_name, Sellers contact details -> sellers_contact_details,
      Short description -> short_description) matches the market-place
      post type's JetEngine meta fields exactly — seller039s_name is that
      field's real slug (JetEngine turned the apostrophe in "Seller's
      name" into "039" rather than dropping it). Images of the item ->
      images_of_the_item, a JetEngine "gallery" field, stored as a
      comma-separated list of Media Library attachment IDs (matching how
      Jet_Engine_Custom_Gallery_Tag reads it back); the first image is
      also set as the post's featured image for the profile page's post
      cards, even though this post type doesn't declare "thumbnail"
      support. See php-files/advertising-directory-marketplace-submissions.php.
      Also added a "Marketplace" section (alongside Job Opportunities and
      Courses) to the Business/Church Profile detail page, listing the
      user's own published market-place posts the same way.
1.9 — Restyled the Business/Church Profile detail page
      ([adv_directory_business_detail]): logo/name/contact now sit in a
      bordered card with inline icons instead of a plain text stack. Added
      "Job Opportunities" and "Courses" sections below it listing that
      user's own published posts as click-to-expand cards (contact details,
      description, category/date/time/location shown on expand via a plain
      <details>/<summary> disclosure — no separate single-post template
      needed). Sections are omitted entirely when the user has no published
      posts of that type. See adv_directory_render_user_posts_section() and
      adv_directory_render_post_disclosure() in
      php-files/advertising-directory-listing.php.
1.8 — Post Advertiser Course (form 2) submissions now create a DRAFT
      `courses` post, same pattern as Job Opportunities: gated on
      adv_directory_posting_tabs_user_is_approved(), routed through the
      shared adv_directory_handle_gf_submission() dispatcher. Field map
      (Courses Name -> post title, Courses Date -> date, Courses Time ->
      time, Courses Location -> location, Courses Description ->
      _description, Contact Details -> contact_details) matches the Courses
      post type's JetEngine meta fields. See
      php-files/advertising-directory-course-submissions.php.
1.7 — Public directory listing: [adv_directory_business_listings] shortcode
      (approved Advertiser/Church cards — logo, name (falls back to the
      username if no organisation name is set), email, address, phone,
      View Details) plus the [adv_directory_business_detail] shortcode it
      links to, on an auto-created "Business / Church Profile" page. Only
      _adv_directory_approval_status = approved registrations are shown.
      Listing shortcode supports layout="grid|carousel", columns="1-6",
      per_page and pagination="true" atts. The carousel layout runs on
      Swiper (reusing Elementor's bundled copy, handle 'swiper') rather
      than a hand-rolled scroll-snap slider. Added an optional "Short
      business/church description" field (organisation_description, max 300
      chars) to registration and the Business/Church Profile tab, shown as a
      trimmed excerpt on listing cards and in full on the detail page. See
      php-files/advertising-directory-listing.php,
      php-files/advertising-directory-fields.php and
      javascript-files/advertising-directory-carousel.js.
1.6 — Filled in the Post Job Opportunities -> job_opportunities field map
      (business_name, short_description, advertiser_logo, plus new
      contact_details / business_category meta keys not yet declared in the
      Post Type builder — see docblock) using the real form_3 field IDs.
      File uploads are sideloaded into the Media Library so advertiser_logo
      stores an attachment ID. Post title is set from Business name once
      submitted. See php-files/advertising-directory-job-submissions.php.
1.5 — First pass at Gravity Forms -> post-type integration: a Post Job
      Opportunities (form 3) submission now creates a DRAFT `job_opportunities`
      post (author = submitter, gated on the same approval check as the
      posting tabs), so staff can review/publish it from wp-admin. Field
      mapping (business name, description, logo, etc.) is deliberately left
      as an empty stub pending the real Gravity Forms field IDs — see
      php-files/advertising-directory-job-submissions.php. Marketplace and
      Advertiser Course submissions are not wired up yet.
1.4 — Added three Gravity Forms My Account tabs — "Post On Marketplace"
      (form 4), "Post Job Opportunities" (form 3) and "Post Advertiser
      Course" (form 2) — gated behind the existing approval workflow
      (adv_directory_user_is_approved()), sitting after Business/Church
      Profile and before Logout. See
      php-files/advertising-directory-posting-tabs.php and
      woocommerce/myaccount/posting-tab.php.
1.3 — Added Business/Church registration fields to the WooCommerce
      My Account login/register form, a new "Business Profile" /
      "Church Profile" My Account tab, and the admin approval workflow
      (Users > Pending Approvals). See php-files/advertising-directory-*.php,
      woocommerce/myaccount/form-login.php and .../business-profile.php,
      and the styling appended at the bottom of this file.
*/



/* =====================================================
   CAN GLOBAL DESIGN SYSTEM
   ===================================================== */

:root {
    /* Core colours */
    --can-black: #000000;
    --can-white: #FFFFFF;
    --can-grey: #9B9B9B;
    --can-dark-grey: #707070;
    --can-light-grey: #F0F0F0;
    --can-mid-blue: #6AB6E6;
    --can-dark-blue: #5090CA;
    --can-light-yellow: #FBC93E;
    --can-dark-yellow: #FAB51E;

    /* Design roles */
    --can-primary: var(--can-dark-blue);
    --can-secondary: var(--can-mid-blue);
    --can-text: var(--can-dark-grey);
    --can-accent: var(--can-dark-yellow);

    /* Typography */
    --can-font-family:
        "Trebuchet MS",
        "Lucida Sans Unicode",
        "Lucida Grande",
        Arial,
        sans-serif;
}


/* =====================================================
   BASE TYPOGRAPHY
   ===================================================== */

body,
button,
input,
select,
textarea,
.elementor-widget-text-editor,
.gform_wrapper,
.woocommerce {
    font-family: var(--can-font-family);
}

body {
    color: var(--can-text);
    background-color: var(--can-white);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}


/* Headings */

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title {
    font-family: var(--can-font-family);
    color: var(--can-primary);
    font-weight: 700;
    line-height: 1.15;
}

h1,
.elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(36px, 4vw, 48px);
}

h2,
.elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(32px, 3.5vw, 40px);
}

h3,
.elementor-widget-heading h3.elementor-heading-title {
    font-size: clamp(28px, 3vw, 33px);
}

h4,
.elementor-widget-heading h4.elementor-heading-title {
    font-size: clamp(24px, 2.5vw, 27px);
}

h5,
.elementor-widget-heading h5.elementor-heading-title {
    font-size: clamp(20px, 2vw, 23px);
}

h6,
.elementor-widget-heading h6.elementor-heading-title {
    font-size: 16px;
}


/* Buttons */

.elementor-button,
.gform_button,
.woocommerce a.button,
.woocommerce button.button {
    font-family: var(--can-font-family);
    font-weight: 700;
}


/* Optional reusable Elementor classes */

.can-bg-blue {
    background-color: var(--can-dark-blue);
}

.can-bg-mid-blue {
    background-color: var(--can-mid-blue);
}

.can-bg-yellow {
    background-color: var(--can-dark-yellow);
}

.can-bg-light-grey {
    background-color: var(--can-light-grey);
}

.can-text-blue {
    color: var(--can-dark-blue);
}

.can-text-yellow {
    color: var(--can-dark-yellow);
}

.can-text-white {
    color: var(--can-white);
}



/* Shared "&larr; Back to home" link — used by the Business/Church
   Profile detail page and single-events.php. Global (not one of the
   per-shortcode dynamic <style> blocks elsewhere in this file) because
   single-events.php is a plain template file with no such block of its
   own to define it in. */
.adv-directory-back-link {
    display: inline-block;
    margin-top: 4px;
    color: var(--can-primary);
    font-weight: 700;
    text-decoration: none;
}
.adv-directory-back-link:hover,
.adv-directory-back-link:focus-visible {
    text-decoration: underline;
}

/* Shared meta-row icon — either the hand-rolled SVG set
   (mail/phone/pin/calendar/clock/tag/briefcase/person —
   adv_directory_meta_icon_svg() in advertising-directory-listing.php) or,
   for a taxonomy fact whose term has its own matched icon (Job
   Opportunities' service_category terms — see the 'category_icon' term
   meta), an actual uploaded image via
   adv_directory_resolve_post_fact_icon_image() in
   advertising-directory-post-types.php. Same class either way so this
   one rule sizes both. Global because single-events.php (and the other
   single-{type}.php templates) has no dynamic <style> block of its own,
   and without this an unstyled <svg viewBox="0 0 24 24"> or a raw
   uploaded <img> both render at a much larger default size. */
.adv-directory-meta-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--can-primary);
    object-fit: contain;
}





/* ------------------------GLOBALS ------------------------*/

/* ---------------- ADVERTISING DIRECTORY: My Account forms ----------------
 * Compact spacing for the WooCommerce My Account forms: the login/register
 * page AND the Business/Church Profile tab. Scoped to body.woocommerce-account
 * so it applies on every My Account page but can NEVER bleed into the
 * WooCommerce checkout form, which reuses the same .form-row /
 * .form-row-first / .form-row-last classes but lives on a
 * body.woocommerce-checkout page instead.
 */

body.woocommerce-account .form-row {
	margin-bottom: 12px;
}

body.woocommerce-account label {
	display: block;
	margin-bottom: 4px;
}

body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account input[type="password"],
body.woocommerce-account textarea {
	padding: 8px 10px;
}

body.woocommerce-account textarea {
	width: 100%;
	resize: vertical;
	min-height: 60px;
}

/* Section headings ("Your details", "Business details", "Agreements"...) */
body.woocommerce-account .adv-directory-section-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #767676;
	font-weight: 700;
	margin: 16px 0 8px;
}
body.woocommerce-account .adv-directory-section-label:first-of-type {
	margin-top: 0;
}

/* Read-only rows on the Business/Church Profile tab (applicant type, Statement of Faith) */
body.woocommerce-account .adv-directory-readonly-row {
	margin-bottom: 14px;
	font-size: 14px;
}
body.woocommerce-account .adv-directory-readonly-row small {
	color: #767676;
}

/* Applicant type fieldset (registration page only) */
body.woocommerce-account .adv-directory-fieldset {
	border: 1px solid #d6d6d6;
	border-radius: 4px;
	padding: 10px 12px;
	margin: 0 0 14px;
}
body.woocommerce-account .adv-directory-fieldset legend {
	font-size: 13px;
	font-weight: 600;
	padding: 0 6px;
}
body.woocommerce-account .adv-directory-radio-row {
	display: flex;
	gap: 14px;
	margin-top: 6px;
}
body.woocommerce-account .adv-directory-radio-row label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	margin: 0;
}

/* First name / Surname side-by-side pair (registration page only) */
body.woocommerce-account .adv-directory-2col {
	display: flex;
	gap: 10px;
}
body.woocommerce-account .adv-directory-2col .form-row-first,
body.woocommerce-account .adv-directory-2col .form-row-last {
	width: auto;
	flex: 1;
	float: none;
	margin: 0 0 12px;
}

/* Statement of Faith / marketing opt-in rows */
body.woocommerce-account .adv-directory-checkbox-row {
	margin-bottom: 8px;
}
body.woocommerce-account .adv-directory-checkbox-row label {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}
body.woocommerce-account .adv-directory-checkbox-row input {
	margin-top: 3px;
	flex-shrink: 0;
}

/* Submit buttons + login "remember me" row */
body.woocommerce-account button[type="submit"] {
	margin-top: 4px;
}
body.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 6px;
}
body.woocommerce-account .adv-directory-rememberme-row {
	margin-bottom: 10px;
}

@media (max-width: 600px) {
	body.woocommerce-account .adv-directory-2col {
		flex-direction: column;
		gap: 0;
	}
}
/* -------------- END ADVERTISING DIRECTORY: My Account forms -------------- */



/* ---------------- ADVERTISING DIRECTORY: My Account nav + content card ----------------
 * Restyles WooCommerce's default My Account layout (plain list nav, no
 * visual separation between nav and content) to match the CAN design
 * system, and to feel like one connected page rather than bare WordPress
 * default markup. Applies to every My Account tab — Dashboard, Orders,
 * Business Profile, the four posting tabs, etc. — not just the ones this
 * theme adds content to.
 */

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 16px;
	border-radius: 8px;
	color: var(--can-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	transition: background-color .15s, color .15s;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
	background: var(--can-light-grey);
	color: var(--can-primary);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--can-primary);
	color: var(--can-white);
}

body.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--can-white);
	border: 1px solid var(--can-light-grey);
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
	padding: 32px;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	body.woocommerce-account .woocommerce-MyAccount-content {
		padding: 20px;
	}
}
/* -------------- END ADVERTISING DIRECTORY: My Account nav + content card -------------- */



/* ---------------- ADVERTISING DIRECTORY: posting-tab headings ----------------
 * The h2 + intro paragraph woocommerce/myaccount/posting-tab.php prints
 * above each embedded Gravity Forms form (see that file for why — Gravity
 * Forms' own raw form title reads like an internal admin label).
 */

.adv-directory-posting-tab__heading {
	margin: 0 0 8px;
	color: var(--can-primary);
}

.adv-directory-posting-tab__description {
	margin: 0 0 24px;
	color: var(--can-text);
	line-height: 1.5;
}



/* ---------------- ADVERTISING DIRECTORY: My Account (Elementor Pro widget) ----------------
 * /my-account/ is built with Elementor Pro's "WooCommerce My Account"
 * widget, not the plain WooCommerce template. Its generated stylesheet
 * (wp-content/uploads/elementor/css/custom-pro-widget-woocommerce-my-account*.css
 * — regenerated by Elementor; never hand-edit it) reads a large set of CSS
 * custom properties for colours/spacing, each with a muted grey/cyan
 * fallback (e.g. var(--tabs-active-color,#5bc0de)) that nothing on this
 * site was overriding, which is why the nav didn't pick up the generic
 * .woocommerce-MyAccount-navigation rules above — this stylesheet loads
 * before Elementor's, so its same-specificity rules lost the cascade.
 * Setting these properties here re-skins the widget with the CAN palette
 * without fighting specificity. .woocommerce-MyAccount-content itself
 * (the card styled above) isn't touched by the widget's CSS — it only
 * targets an inner ".../-content-wrapper" element that's present for a
 * handful of built-in WooCommerce tabs, not the tabs this theme adds —
 * so that card rule keeps applying as-is.
 */

.elementor-widget-woocommerce-my-account {
	--general-text-color: var(--can-text);
	--links-normal-color: var(--can-primary);
	--links-hover-color: var(--can-secondary);
	--typography-section-titles-color: var(--can-primary);

	--tabs-normal-color: var(--can-text);
	--tabs-hover-color: var(--can-primary);
	--tabs-active-color: var(--can-white);
	--tabs-active-border-color: var(--can-primary);
	--tabs-hover-border-color: var(--can-light-grey);
	--tabs-border-radius: 8px;
	--tabs-divider-weight: 0px;
	--tabs-spacing: 6px;
	--tabs-padding: 12px 16px;

	--sections-background-color: var(--can-white);
	--sections-border-color: var(--can-light-grey);
	--sections-border-radius: 14px;

	--forms-fields-normal-background-color: var(--can-white);
	--forms-fields-normal-color: var(--can-text);
	--forms-fields-focus-color: var(--can-primary);
	--forms-fields-focus-background-color: var(--can-white);
	--forms-fields-border-radius: 6px;
	--forms-labels-color: var(--can-primary);
	--forms-buttons-normal-text-color: var(--can-white);
	--forms-buttons-hover-text-color: var(--can-white);
	--forms-buttons-border-radius: 6px;

	--tables-title-color: var(--can-primary);
	--tables-items-color: var(--can-text);
	--tables-links-normal-color: var(--can-primary);
	--tables-links-hover-color: var(--can-secondary);
	--tables-button-normal-text-color: var(--can-primary);
	--tables-buttons-border-color: var(--can-primary);
	--tables-button-border-radius: 6px;
}

/* A handful of buttons/active-states hardcode their colour (e.g.
 * background:#5bc0de) instead of reading a variable. These match the
 * widget's own selector chains exactly, scoped no wider than that --
 * !important is unavoidable here since Elementor's stylesheet loads
 * after this one on every render. */
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--can-primary) !important;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--can-light-grey);
}

/* Broad rather than an enumerated list of WooCommerce's own form
 * classes (.login, .register, .woocommerce-EditAccountForm, etc.) so it
 * also covers this theme's own custom forms (Business Profile) without
 * needing a matching entry added here every time. */
.elementor-widget-woocommerce-my-account .woocommerce button.button,
.elementor-widget-woocommerce-my-account .woocommerce input.button,
.elementor-widget-woocommerce-my-account .woocommerce a.button,
.elementor-widget-woocommerce-my-account #add_payment_method #payment #place_order {
	background: var(--can-primary) !important;
	color: var(--can-white) !important;
	border-radius: 6px !important;
}

.elementor-widget-woocommerce-my-account .woocommerce button.button:hover,
.elementor-widget-woocommerce-my-account .woocommerce input.button:hover,
.elementor-widget-woocommerce-my-account .woocommerce a.button:hover {
	background: var(--can-secondary) !important;
}
/* -------------- END ADVERTISING DIRECTORY: My Account (Elementor Pro widget) -------------- */



/* ---------------- ADVERTISING DIRECTORY: Gravity Forms ----------------
 * Gravity Forms is only ever embedded via the four My Account posting
 * tabs on this site (confirmed: no page/post content or Elementor widget
 * references it elsewhere), so it's safe to restyle .gform_wrapper
 * globally to match the CAN design system instead of Gravity Forms'
 * default look.
 *
 * Gravity Forms 2.9's bundled "Orbital" theme (gform-theme--framework)
 * wraps most of its own selector in :where() specifically to keep its
 * specificity low and easy to override -- EXCEPT for a few real classes
 * it deliberately keeps outside :where() on its form-control reset rule
 * (.gform-theme--framework.gform-theme.gform_wrapper button.button, etc),
 * which ends up more specific than a plain ".gform_wrapper .gform_button"
 * chain and also loads after this stylesheet. The properties below use
 * !important for exactly that reason — this isn't fighting our own CSS,
 * it's asserting the site's design system over a bundled plugin theme.
 */

.gform_wrapper .gform_heading {
	/* Replaced by the tab's own heading/description — see
	   .adv-directory-posting-tab__heading above and title="false"
	   description="false" on the [gravityform] shortcode call. */
	display: none;
}

/* Gravity Forms' own theme lays .gform_fields out as a CSS grid with a
 * 40px row-gap (gravity-forms-theme-framework.min.css) — on top of the
 * per-field margin-bottom below, that's what made the spacing so loose.
 * !important for the same reason as the rest of this section: that
 * framework CSS loads after this stylesheet. gap: 0 is a second line of
 * defence in case "display: block" doesn't stick (grid's row-gap has no
 * effect once it isn't a grid, but zeroing it too costs nothing). */
.gform_wrapper .gform_fields {
	display: block !important;
	gap: 0 !important;
}

.gform_wrapper .gfield {
	margin-bottom: 16px;
}

.gform_wrapper .gfield_label {
	display: block;
	font-weight: 700;
	color: var(--can-primary) !important;
	margin-bottom: 4px !important;
}

.gform_wrapper .gfield_description,
.gform_wrapper .instruction {
	color: var(--can-grey) !important;
	font-size: 13px;
	margin-top: 4px;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--can-light-grey) !important;
	border-radius: 6px !important;
	padding: 10px 12px !important;
	font-size: 15px;
	color: var(--can-text) !important;
	background: var(--can-white) !important;
	transition: border-color .15s, box-shadow .15s;
}

.gform_wrapper textarea {
	resize: vertical;
	min-height: 100px;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	border-color: var(--can-primary) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(80, 144, 202, .15);
}

.gform_wrapper .ginput_container_fileupload {
	border: 1px dashed var(--can-grey);
	border-radius: 6px;
	padding: 12px;
	background: var(--can-light-grey);
}

.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	margin: 8px 0 0;
	padding: 0;
}

.gform_wrapper .gform_button {
	background: var(--can-primary) !important;
	color: var(--can-white) !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 12px 28px !important;
	font-size: 15px;
	cursor: pointer;
	transition: background-color .15s;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus-visible {
	background: var(--can-secondary) !important;
}

.gform_wrapper .validation_error {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	color: #b32d2e !important;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 20px;
	font-weight: 600;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: #d63638 !important;
}

.gform_wrapper .validation_message {
	color: #d63638 !important;
	font-size: 13px;
	margin-top: 4px;
}

.gform_wrapper .gform_confirmation_message {
	background: #eaf7ec;
	border: 1px solid #b7e4c7;
	color: #1e7e34 !important;
	border-radius: 8px;
	padding: 16px 20px;
}
/* -------------- END ADVERTISING DIRECTORY: Gravity Forms -------------- */



/* ---------------- ADVERTISING DIRECTORY: single post pages ----------------
 * Shared by all four single-{post_type}.php templates (Events, Courses,
 * Job Opportunities, Marketplace) — see
 * php-files/advertising-directory-single-post.php. Reuses the same
 * meta-icon system already built for the Business/Church Profile page
 * (adv_directory_meta_icon_svg() in advertising-directory-listing.php)
 * rather than inventing a second visual language for "a card with an
 * image, a title, and some icon+label facts".
 *
 * Full-width hero image, then a two-column layout below it: a wide main
 * card (title + description) alongside a narrower facts sidebar card —
 * a standard listing-page split, and a better use of 1200px than one
 * long single-column measure of body text stretched edge to edge.
 */

.adv-directory-post-single { max-width: 1200px; margin: 40px auto; padding: 0 24px; box-sizing: border-box; }

.adv-directory-post-single__image,
.adv-directory-post-single__image--placeholder {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: 14px;
	margin-bottom: 32px;
}
.adv-directory-post-single__image--placeholder {
	padding: 60px 0;
	box-sizing: border-box;
	background: var(--can-light-grey);
}

.adv-directory-post-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 28px;
	align-items: start;
}

.adv-directory-post-single__main,
.adv-directory-post-single__facts-card {
	background: var(--can-white);
	border: 1px solid var(--can-light-grey);
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
	box-sizing: border-box;
}
.adv-directory-post-single__main { padding: 36px; }
.adv-directory-post-single__facts-card { padding: 28px; position: sticky; top: 24px; }

.adv-directory-post-single__title { margin: 0 0 24px; color: var(--can-primary); }

.adv-directory-post-single__facts-heading {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--can-accent);
}

.adv-directory-post-single__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.adv-directory-post-single__facts li { display: flex; align-items: flex-start; gap: 12px; color: var(--can-text); font-size: 15px; line-height: 1.4; }
.adv-directory-post-single__facts .adv-directory-meta-icon { margin-top: 2px; }

.adv-directory-post-single__section h2 {
	margin: 0 0 10px;
	font-size: clamp(18px, 2vw, 20px);
	color: var(--can-primary);
}
.adv-directory-post-single__section p {
	margin: 0 0 16px;
	max-width: 68ch;
	color: var(--can-text);
	line-height: 1.7;
}
.adv-directory-post-single__section p:last-child { margin-bottom: 0; }

.adv-directory-post-single__back { display: block; margin-top: 28px; }

@media (max-width: 900px) {
	.adv-directory-post-single__layout { grid-template-columns: 1fr; }
	.adv-directory-post-single__facts-card { position: static; order: -1; }
}

@media (max-width: 600px) {
	.adv-directory-post-single { margin: 24px auto; padding: 0 16px; }
	.adv-directory-post-single__image,
	.adv-directory-post-single__image--placeholder { height: 220px; margin-bottom: 20px; }
	.adv-directory-post-single__layout { gap: 20px; }
	.adv-directory-post-single__main { padding: 24px; }
	.adv-directory-post-single__facts-card { padding: 24px; }
}
/* -------------- END ADVERTISING DIRECTORY: single post pages -------------- */



/* ---------------- ADVERTISING DIRECTORY: post grids (homepage) ----------------
 * Shared by all four [adv_directory_*] homepage grid shortcodes — see
 * php-files/advertising-directory-post-grid.php. Global rather than a
 * per-shortcode dynamic <style> block (unlike the business-listings
 * shortcode elsewhere in this file) because these shortcodes are meant
 * to be dropped onto the homepage alongside each other, and CSS this
 * generic is cheap to just always have available.
 */

.adv-directory-post-grid {
	max-width: 1100px;
	margin: 0 auto;
	padding-bottom: 40px;
	--swiper-pagination-color: var(--can-primary);
	--swiper-pagination-bullet-inactive-color: var(--can-light-grey);
	--swiper-pagination-bullet-inactive-opacity: 1;
}
.adv-directory-post-grid .swiper-wrapper {
	align-items: stretch;
}

.adv-directory-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--can-white);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.adv-directory-post-card__image {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}
.adv-directory-post-card__image--placeholder {
	padding: 30px 0;
	box-sizing: border-box;
	background: var(--can-light-grey);
}
.adv-directory-post-card__footer {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	background: var(--can-light-grey);
}
.adv-directory-post-card__text {
	min-width: 0;
}
/* Fixed image height above already makes every card's media area equal
 * — line-clamping the title/meta to a fixed number of lines (with
 * matching min-height, since a short title would otherwise take less
 * space than a clamped long one) does the same for the footer, so every
 * card ends up the same total height regardless of how long its title
 * or subtitle text is. Swiper's Grid module doesn't equalize slide
 * heights on its own — confirmed by testing with a one-word title next
 * to a full-sentence one, which came out ~190px apart without this. */
.adv-directory-post-card__title {
	margin: 0;
	font-size: 20px;
	color: var(--can-primary);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.25em * 2);
	line-height: 1.25;
}
.adv-directory-post-card__meta {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--can-grey);
	min-height: 1.4em;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* bdthemes-element-pack's bundled UIkit CSS ships a bare
 * "a{color:inherit !important}" reset (confirmed in bdt-uikit.css) that
 * beats a plain, non-!important color rule on any link regardless of the
 * link's own selector specificity — hence !important here too. It only
 * touches "color"; nothing else on this button needs it. */
.adv-directory-post-card__button {
	flex-shrink: 0;
	display: inline-block;
	background: var(--can-primary);
	color: var(--can-white) !important;
	font-weight: 700;
	text-decoration: none;
	padding: 12px 26px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background-color .15s;
}
.adv-directory-post-card__button:hover,
.adv-directory-post-card__button:focus-visible {
	background: var(--can-secondary) !important;
}

@media (max-width: 500px) {
	.adv-directory-post-card__footer {
		flex-direction: column;
		align-items: flex-start;
	}
	.adv-directory-post-card__button {
		align-self: stretch;
		text-align: center;
	}
}

/* Courses-only "inset" card variant (adv_directory_render_post_grid_card_inset()
 * in advertising-directory-post-grid.php) — image inset with padding on a
 * light-grey card body instead of edge-to-edge with a footer strip,
 * organisation name, a description excerpt, and a full-width button
 * instead of a pill on the right. No star rating: that was a
 * placeholder/generic-template artifact in the mockup this card design
 * was built from, not something this site tracks. */
.adv-directory-post-card--inset {
	padding: 24px;
	background: var(--can-light-grey);
	box-shadow: none;
}

.adv-directory-post-card--inset .adv-directory-post-card__image-wrap {
	background: var(--can-white);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 20px;
	aspect-ratio: 1 / 1;
}
.adv-directory-post-card--inset .adv-directory-post-card__image,
.adv-directory-post-card--inset .adv-directory-post-card__image--placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.adv-directory-post-card--inset .adv-directory-post-card__image--placeholder {
	padding: 40px;
	box-sizing: border-box;
	background: var(--can-white);
}

.adv-directory-post-card--inset .adv-directory-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.adv-directory-post-card--inset .adv-directory-post-card__title {
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 8px;
	min-height: calc(1.2em * 2);
}

.adv-directory-post-card--inset .adv-directory-post-card__org {
	margin: 0 0 12px;
	color: var(--can-accent);
	font-weight: 700;
	font-size: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.adv-directory-post-card--inset .adv-directory-post-card__excerpt {
	margin: 0 0 20px;
	color: var(--can-text);
	font-size: 14px;
	line-height: 1.6;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.6em * 3);
}

.adv-directory-post-card--inset .adv-directory-post-card__button--block {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	border-radius: 8px;
}
/* -------------- END ADVERTISING DIRECTORY: post grids (homepage) -------------- */







/* CAN 2.7.1: account layout. Button colours remain owned by the existing theme/Elementor rules. */
body.woocommerce-account .can-account-switch{display:flex;gap:12px;justify-content:center;margin:16px auto 28px;flex-wrap:wrap}
body.woocommerce-account .can-account-switch a.button{margin:0;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:12px 24px}
body.woocommerce-account .can-account-switch a[aria-current="page"]{outline:2px solid var(--can-primary,#5090ca);outline-offset:4px}
body.woocommerce-account #customer_login.can-account-panels{display:block;width:100%;max-width:720px;margin:0 auto 40px;height:auto!important;min-height:0!important}
body.woocommerce-account #customer_login.can-account-panels[data-view="login"]{max-width:520px}
body.woocommerce-account #customer_login.can-account-panels>div{float:none;width:100%;padding:0;height:auto!important;min-height:0!important;align-self:start}
body.woocommerce-account #customer_login[data-view="login"]>.u-column2,body.woocommerce-account #customer_login[data-view="register"]>.u-column1{display:none!important}
/* Elementor's My Account equal-height script sets an inline height. Override only these forms. */
body.woocommerce-account #customer_login.can-account-panels form.login,body.woocommerce-account #customer_login.can-account-panels form.register{height:auto!important;min-height:0!important;max-height:none!important;box-sizing:border-box;margin:20px 0 0;padding:28px!important;box-shadow:none}
body.woocommerce-account #customer_login h2{font-size:28px;line-height:1.25;margin:0 0 8px;text-align:center;color:var(--can-primary,#5090ca)}
body.woocommerce-account #customer_login .u-column2>p{text-align:center;margin:0;color:var(--can-text,#69727d);font-size:15px}
body.woocommerce-account #customer_login .adv-directory-section-label{font-size:15px;line-height:1.4;letter-spacing:0;text-transform:none;font-weight:600;margin:24px 0 14px;color:var(--can-primary,#5090ca);clear:both}
body.woocommerce-account #customer_login .form-row{margin:0 0 16px;padding:0;box-sizing:border-box}
body.woocommerce-account #customer_login .form-row label{margin-bottom:6px;line-height:1.5}
body.woocommerce-account #customer_login .adv-directory-fieldset{margin:0 0 20px;padding:14px 16px;border-radius:6px}
body.woocommerce-account #customer_login .adv-directory-2col{gap:16px}
body.woocommerce-account #customer_login .adv-directory-field-help{display:block;margin-top:6px;line-height:1.5}
/* Shared preferences use WooCommerce rows and Elementor input styles, not a nested card. */
body.woocommerce-account .can-directory-preferences{border:0;border-top:1px solid var(--can-light-grey,#e7ebef);border-radius:0;padding:22px 0 0;margin:26px 0 24px;min-width:0;width:100%;box-sizing:border-box;clear:both}
body.woocommerce-account .can-directory-preferences[hidden]{display:none!important}
body.woocommerce-account .can-directory-preferences legend{float:left;display:block;width:100%;padding:0;margin:0 0 10px;font-weight:600;font-size:15px;line-height:1.4;color:var(--forms-labels-color,var(--can-primary,#5090ca))}
body.woocommerce-account .can-directory-preferences .can-directory-help{clear:both;font-size:13px;line-height:1.6;margin:0 0 18px;color:var(--general-text-color,var(--can-text,#69727d))}
body.woocommerce-account .can-directory-preferences .can-directory-help:last-child{margin-bottom:0}
body.woocommerce-account .can-directory-preferences .form-row{float:none;clear:both;display:block;width:100%;padding:0;margin:0 0 18px}
body.woocommerce-account .can-directory-label{display:block;margin-bottom:10px;color:var(--forms-labels-color,var(--can-primary,#5090ca))}
body.woocommerce-account .can-directory-radio-row{display:flex;gap:12px 24px;flex-wrap:wrap}
body.woocommerce-account .can-directory-radio-row label{display:inline-flex;align-items:center;gap:8px;margin:0!important;line-height:1.5;cursor:pointer}
body.woocommerce-account .can-directory-radio-row input{width:16px;height:16px;flex:0 0 16px;margin:0;accent-color:var(--can-primary,#5090ca)}
body.woocommerce-account .can-directory-preferences select{width:100%;max-width:100%;box-sizing:border-box;min-height:46px;padding:10px 12px;font:inherit;color:var(--forms-fields-normal-color,var(--can-text,#69727d));background-color:var(--forms-fields-normal-background-color,#f8f8f8);border:1px solid var(--forms-fields-border-color,transparent);border-radius:var(--forms-fields-border-radius,6px)}
body.woocommerce-account .can-directory-preferences input[type="email"]{width:100%;box-sizing:border-box}
body.woocommerce-account .can-directory-preferences label small{font-weight:400;font-size:12px}
body.woocommerce-account .adv-directory-business-profile-form{height:auto!important;min-height:0!important;box-sizing:border-box;padding:24px!important}
.can-directory-filter{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 28px}
.can-directory-filter select{min-height:44px;max-width:100%;padding:8px;border:1px solid #cedbe5;border-radius:6px}
.can-directory-filter button{background:var(--can-primary,#5090ca);color:var(--can-white,#fff);border:0;border-radius:6px;padding:12px 18px}
.can-account-switch a:focus-visible,.can-directory-filter :focus-visible,.can-directory-preferences :focus-visible{outline:2px solid var(--can-primary,#5090ca);outline-offset:3px}
@media(max-width:767px){body.woocommerce-account #customer_login.can-account-panels form.login,body.woocommerce-account #customer_login.can-account-panels form.register{padding:20px!important}body.woocommerce-account #customer_login h2{font-size:24px}.can-directory-filter{align-items:stretch;flex-direction:column}body.woocommerce-account .can-account-switch a.button{padding:10px 16px}body.woocommerce-account .can-directory-radio-row{flex-direction:column;gap:12px}}

/* Directory results inherit the existing CAN card palette and typography. */
.can-directory-filter{font-family:var(--can-font-family,inherit);color:var(--can-text,#69727d);padding:20px;background:var(--can-light-grey,#f5f7f9);border-radius:10px}
.can-directory-filter label{font-weight:600;color:var(--can-primary,#5090ca)}
.can-directory-filter .elementor-button{background:var(--can-primary,#5090ca);color:var(--can-white,#fff)}
.can-directory-filter .elementor-button:hover{background:var(--can-secondary,#ffb719);color:var(--can-white,#fff)}

/* CAN profile detail: typography and colours follow the existing site palette. */
.adv-directory-profile.can-profile-detail{max-width:1100px;margin:0 auto;padding:24px 0 48px;font-family:var(--can-font-family,inherit);color:var(--can-text,#69727d)}
.can-profile-detail .can-directory-return{display:inline-flex;align-items:center;gap:9px;margin:0 0 24px;font-size:14px;line-height:1.5;color:var(--can-primary,#5090ca);text-decoration:none}
.can-profile-detail .can-directory-return:hover{text-decoration:underline}
.can-profile-detail .adv-directory-profile__card{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:start;gap:36px;padding:40px;margin:0 0 36px;border:1px solid var(--can-light-grey,#e7edf2);border-top:4px solid var(--can-primary,#5090ca);border-radius:14px;background:var(--can-white,#fff);box-shadow:0 8px 28px #24445b08;text-align:left}
.can-profile-detail .adv-directory-profile__logo{width:200px;height:180px;max-width:100%;object-fit:contain;padding:20px;box-sizing:border-box;border:1px solid var(--can-light-grey,#e7edf2);border-radius:10px;background:#fff}
.can-profile-detail .adv-directory-profile__badge{display:inline-block;padding:6px 12px;margin:0 0 16px;border-radius:5px;background:var(--can-light-grey,#f4f7fa);color:var(--can-primary,#5090ca);font-size:12px;line-height:1.5;font-weight:700;letter-spacing:.04em}
.can-profile-detail .adv-directory-profile__name{font-size:clamp(28px,4vw,42px);line-height:1.15;letter-spacing:-.02em;margin:0 0 20px;overflow-wrap:anywhere}
.can-profile-detail .adv-directory-profile__description{font-size:16px;line-height:1.8;margin:0 0 28px;max-width:65ch}
.can-profile-detail .can-profile-contact-title{font-size:17px;font-weight:600;margin:0 0 14px;color:var(--can-primary,#5090ca)}
.can-profile-detail .adv-directory-profile__meta-list{gap:12px;padding-top:16px;border-top:1px solid var(--can-light-grey,#e7edf2)}
.can-profile-detail .adv-directory-profile__meta-list li{justify-content:flex-start;overflow-wrap:anywhere}
.can-profile-detail .adv-directory-profile__meta-list a{color:var(--can-primary,#5090ca)}
.can-profile-detail .adv-directory-profile__section{padding:24px;background:var(--can-light-grey,#f5f7f9);border-radius:12px;margin-bottom:24px}
.can-profile-detail .adv-directory-profile__section-title{font-size:24px;line-height:1.3;border:0;padding:0;margin:0 0 20px}
.can-header-account{display:inline-flex;align-items:center;gap:8px;font-family:var(--can-font-family,inherit);color:var(--can-primary,#5090ca);font-size:14px;line-height:1.5;text-decoration:none;max-width:100%}
.can-header-account span{overflow-wrap:anywhere}.can-header-account svg{flex:0 0 18px}
.can-header-account:hover{color:var(--can-secondary,#ffb719)}
.can-header-account:focus-visible,.can-profile-detail a:focus-visible{outline:2px solid var(--can-primary,#5090ca);outline-offset:4px}
@media(max-width:767px){.can-profile-detail .adv-directory-profile__card{grid-template-columns:1fr;gap:24px;padding:24px}.can-profile-detail .adv-directory-profile__logo{width:160px;height:140px}.can-profile-detail .adv-directory-profile__section{padding:18px}.adv-directory-profile.can-profile-detail{padding:16px 0 32px}}

/* Directory overview, scoped to the directory shortcode. */
.can-business-overview{max-width:1152px;margin:0 auto;padding:32px 0 48px;font-family:var(--can-font-family,inherit)}
.can-business-overview .can-directory-intro{margin-bottom:24px}
.can-business-overview .can-directory-intro h2{font-size:clamp(24px,3vw,32px);line-height:1.25;color:var(--can-primary,#5090ca);margin:0 0 10px}
.can-business-overview .can-directory-intro p{color:var(--can-text,#69727d);margin:0;line-height:1.6}
.can-business-overview .can-directory-filter{display:grid;grid-template-columns:minmax(200px,1fr) auto auto;gap:16px;align-items:end;padding:24px;margin-bottom:32px;border:1px solid #e4eaf0;border-radius:12px;background:#f7f9fb}
.can-business-overview .can-directory-filter-field{min-width:0}
.can-business-overview .can-directory-filter-field label{display:block;font-size:14px;margin-bottom:8px}
.can-business-overview .can-directory-filter-field select{width:100%;height:46px;margin:0;background:#fff;border:1px solid #d4dfe8;color:var(--can-text,#69727d);border-radius:6px;padding:10px 12px}
.can-business-overview .can-directory-filter button{min-height:46px;margin:0;border-radius:6px;white-space:nowrap}
.can-business-overview .can-directory-filter>a{display:flex;align-items:center;min-height:46px;font-size:14px;white-space:nowrap;color:var(--can-primary,#5090ca)}
.can-business-overview .can-directory-results-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.can-business-overview .can-directory-results-heading h3{margin:0;font-size:22px;color:var(--can-primary,#5090ca)}
.can-business-overview .can-directory-results-heading span{font-size:14px;color:var(--can-text,#69727d)}
.can-business-overview .adv-directory-listing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px}
.can-business-overview .adv-directory-card{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:stretch;border:1px solid #e4eaf0;border-radius:12px;box-shadow:0 4px 18px #24445b06;overflow:hidden}
.can-business-overview .adv-directory-card__image,.can-business-overview .adv-directory-card__placeholder{width:100%;height:100%;min-height:200px;object-fit:contain;padding:20px;box-sizing:border-box;background:#fff4de}
.can-business-overview .adv-directory-card__body{min-width:0;padding:24px;gap:10px}
.can-business-overview .adv-directory-card__badge{font-size:11px;line-height:1.4;letter-spacing:.06em;color:var(--can-primary,#5090ca)}
.can-business-overview .adv-directory-card__name{font-size:24px;line-height:1.2;overflow-wrap:anywhere}
.can-business-overview .adv-directory-card__meta{font-size:14px;overflow-wrap:anywhere}
.can-business-overview .adv-directory-card__excerpt{font-size:14px;line-height:1.6;margin:0}
.can-business-overview .adv-directory-card__button{padding-top:8px}
.can-business-overview .adv-directory-card__button a{font-size:14px;border-radius:6px}
.can-business-overview .adv-directory-listing-empty{padding:32px;background:#f7f9fb;border:1px dashed #d4dfe8;border-radius:10px;text-align:center}
/* Orange surface keeps transparent white logo artwork visible. */
.can-profile-detail .adv-directory-profile__logo{background:var(--can-secondary,#ffb719);border-color:var(--can-secondary,#ffb719)}
.can-profile-detail .can-business-activities{margin-top:28px;border-top:1px solid #e4eaf0;padding-top:8px}
.can-profile-detail .can-business-activities .adv-directory-profile__section{background:transparent;padding:20px 0;margin:0;border-bottom:1px solid #e4eaf0;border-radius:0}
.can-profile-detail .can-business-activities .adv-directory-profile__section:last-child{border-bottom:0}
.can-profile-detail .can-business-activities .adv-directory-profile__section-title{font-size:17px;line-height:1.4;margin:0 0 10px}
.can-profile-detail .can-listing-none{margin:0;color:var(--can-text,#69727d);font-size:14px}
@media(max-width:900px){.can-business-overview .adv-directory-listing-grid{grid-template-columns:1fr!important}}
@media(max-width:600px){.can-business-overview .can-directory-filter{grid-template-columns:1fr;padding:18px;gap:12px}.can-business-overview .adv-directory-card{grid-template-columns:100px minmax(0,1fr)}.can-business-overview .adv-directory-card__image{padding:12px}.can-business-overview .adv-directory-card__body{padding:18px}.can-business-overview .adv-directory-card__name{font-size:21px}.can-business-overview .can-directory-results-heading{align-items:start;flex-direction:column;gap:4px}}

/* Compact logo panels replace tall strips on directory cards. */
.can-business-overview .adv-directory-card{display:flex;flex-direction:column;padding:24px;background:#fff;gap:0}
.can-business-overview .adv-directory-card__image,.can-business-overview .adv-directory-card__placeholder{align-self:flex-start;width:180px;height:100px;min-height:0;max-width:100%;padding:16px;object-fit:contain;border-radius:8px;background:var(--can-secondary,#ffb719);border:0;margin:0 0 22px}
.can-business-overview .adv-directory-card__body{padding:0;flex:1;gap:12px}
.can-business-overview .adv-directory-card__name{font-size:25px;margin:0}
.can-business-overview .adv-directory-card__badge{letter-spacing:.04em}
.can-business-overview .adv-directory-card__button{margin-top:auto;padding-top:18px}
.can-business-overview .adv-directory-card__button a{width:auto;min-width:150px;padding:11px 22px}
@media(max-width:600px){.can-business-overview .adv-directory-card{padding:20px}.can-business-overview .adv-directory-card__image{width:160px;height:96px}}

/* Keep the job category text inside the control despite theme/framework sizing. */
body.woocommerce-account #gform_wrapper_3 #input_3_6 {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 46px !important;
    max-height: none !important;
    padding: 10px 36px 10px 12px !important;
    font-size: 15px !important;
    line-height: 24px !important;
    text-indent: 0 !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
}


/* Three businesses per row on desktop */
.can-business-overview .adv-directory-listing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px;
}

/* Two per row on tablets */
@media (max-width: 1024px) {
    .can-business-overview .adv-directory-listing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* One per row on phones */
@media (max-width: 600px) {
    .can-business-overview .adv-directory-listing-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
