/* Styles needed by Power Breeder in all themes */

/* Admin Edit Links: BS5 Themes */

body.pb-bs5.pb-frontend-edit-links .admin-edit a,
body.pb-bs5.pb-frontend-edit-links .admin-edit a:visited,
body.pb-bs5.pb-frontend-edit-links a.admin-edit,
body.pb-bs5.pb-frontend-edit-links a:visited.admin-edit,
body.pb-bs5.pb-frontend-edit-links nav[data-bs-theme='light'].navbar .admin-edit a,
body.pb-bs5.pb-frontend-edit-links nav[data-bs-theme='light'].navbar .admin-edit a:visited,
body.pb-bs5.pb-frontend-edit-links nav[data-bs-theme='dark'].navbar .admin-edit a,
body.pb-bs5.pb-frontend-edit-links nav[data-bs-theme='dark'].navbar .admin-edit a:visited {
    background-color: #3c8dbc !important;
    color: #fff !important;
}

body.pb-bs5.pb-frontend-edit-links .pb-page-title {
    display: inline-block;
}

body.pb-bs5.pb-frontend-edit-links main,
body.pb-bs5.pb-frontend-edit-links .carousel,
body.pb-bs5.pb-frontend-edit-links .pb-business-name,
body.pb-bs5.pb-frontend-edit-links .pb-page-title {
    position: relative;
}

body.pb-bs5.pb-frontend-edit-links .pb-business-name .admin-edit.edit-settings {
    position: absolute;
    top: -6px;
    right: -26px;
    padding: 0 4px;
}

body.pb-bs5.pb-frontend-edit-links .pb-breeding-heading .admin-edit.edit-breeding,
body.pb-bs5.pb-frontend-edit-links .pb-animal-list-heading .admin-edit.edit-list {
    position: absolute;
    top: 20px;
    right: -12px;
    padding: 0 4px;
}

body.pb-bs5.pb-frontend-edit-links .carousel .admin-edit.edit-slider {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 999;
}

body.pb-bs5.pb-frontend-edit-links .admin-edit.edit-page,
body.pb-bs5.pb-frontend-edit-links .admin-edit.edit-home { text-align: center !important; }
body.pb-bs5.pb-frontend-edit-links .admin-edit a, .admin-edit a:visited { display: inline-block; }

body.pb-bs5.pb-frontend-edit-links:not(.pb-animal-profile) .pb-animal-list .admin-edit.edit-profile {
    display: inline-block;
}

body.pb-bs5.pb-frontend-edit-links .btn.btn-sm .bi.bi-pencil-square {
    font-size: .84rem !important;
}

body.pb-bs5.pb-frontend-edit-links .pb-article-index .admin-edit.edit-news,
body.pb-bs5.pb-frontend-edit-links .sjfb-form .admin-edit.edit-form {
    float: right;
}

body.pb-bs5.pb-frontend-edit-links:not(.pb-animal-profile) .pb-animal-list .mobile-only .admin-edit.edit-profile {
    margin-bottom: 1rem;
}

body.pb-bs5.pb-frontend-edit-links .admin-edit.edit-links {
    margin-bottom: .5rem;
}

body.pb-bs5.pb-frontend-edit-links .admin-edit.edit-home,
body.pb-bs5.pb-frontend-edit-links .admin-edit.edit-page,
body.pb-bs5.pb-frontend-edit-links.pb-news-single .admin-edit.edit-news,
body.pb-bs5.pb-frontend-edit-links.pb-animal-profile .admin-edit.edit-profile,
body.pb-bs5.pb-frontend-edit-links.pb-animal-profile-pedigree .admin-edit.edit-profile,
body.pb-bs5.pb-frontend-edit-links.pb-animal-profile-relationships .admin-edit.edit-profile {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 999;
}

body.pb-bs5.pb-frontend-edit-links .admin-edit.edit-page a,
body.pb-bs5.pb-frontend-edit-links .admin-edit a:hover,
body.pb-bs5.pb-frontend-edit-links nav[data-bs-theme='light'].navbar .admin-edit a:hover,
body.pb-bs5.pb-frontend-edit-links nav[data-bs-theme='dark'].navbar .admin-edit a:hover {
    background-color: #367fa9 !important;
    color: #fff !important;
    text-decoration: none;
    border-color: #204d74;
}

body.pb-bs5.pb-frontend-edit-links .bi.pb-edit-social {
    background-color: #3c8dbc !important;
    color: #fff !important;
    fill: #ffffff !important;
    padding: 2px;
}

/* Admin Edit Links: Legacy Themes */

body:not(.pb-bs5) .admin-edit a:hover {
    background-color: #367fa9 !important;
    color: #fff !important;
    text-decoration: none;
    border-color: #204d74;
}

body:not(.pb-bs5) .admin-edit a,
body:not(.pb-bs5) .admin-edit a:visited {
    background-color: #3c8dbc !important;
    color: #fff !important;
    padding: 6px 12px;
}

body:not(.pb-bs5) div.admin-edit {
    display: block;
    text-align: center;
    margin-bottom: 5px;
}

body:not(.pb-bs5) .admin-edit.clicked a,
body:not(.pb-bs5) div.admin-edit.clicked a {
    background-color: #dd4b39 !important;
    border-color: #be4031 !important;
}

body:not(.pb-bs5) .admin-edit.clicked a:hover,
body:not(.pb-bs5) div.admin-edit.clicked a:hover {
    background-color: #be4031 !important;
    border-color: #a3372a !important;
}

body:not(.pb-bs5) div.admin-edit.edit-page,
body:not(.pb-bs5) div.admin-edit.edit-home,
body:not(.pb-bs5) div.admin-edit.edit-news {
    text-align: left;
    margin-bottom: 10px;
}

body:not(.pb-bs5) div.admin-edit.edit-profile {
    padding-bottom:8px;
}

/* Subscribe Form */
.callout {
    border-radius: 3px;
    margin: 10px 0 10px 0;
    padding: 15px 30px 10px 15px;
    border-left: 5px solid #eee;
    color: #fff;
}

.callout h4 {
    margin: 15px 0;
}

.callout p {
    margin-bottom: 10px;
}
.callout.callout-success {
    background-color: #00a65a;
    border-color: #00733e;
}
.callout.callout-warning {
    background-color: #f39c12;
    border-color: #c87f0a;
}

.callout a:link, .callout a:visited, .callout a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Pedigree Viewer */

#pb-pedigree-viewer {
    overflow:auto;
    border-top: 5px solid transparent;
}

#pb-pedigree-viewer table {
    border: none;
    margin: 1% auto;
    width: 96%;
    border-collapse: collapse;
    border-spacing: 0;
    line-height: 1.2;
}
#pb-pedigree-viewer table td {
    border-top: none;
    vertical-align:middle;
}
#pb-pedigree-viewer .pedigree-builder-label {
    min-width: 150px;
    background-color: #111;
    border: 1px solid #111;
    color: #FFFFFF;
    font-weight: bold;
    outline: 2px solid #111;
    padding: 10px;
    white-space: nowrap;
}
#pb-pedigree-viewer .chart,
#pb-pedigree-viewer .blank,
#pb-pedigree-viewer .spacer {
    background-color: #eee;
}
#pb-pedigree-viewer .chart {
    border-left: 1px solid #111;
    width: 20%;
}
#pb-pedigree-viewer .pb-ped-animal {
    /* Hight = Min-Height on tables - set min height for blank animal spaces */
    height: 30px;
    border: 1px solid #111;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    margin:0;
    padding: 3px;
    background-color:#fff;
    width: 20%;
}
#pb-pedigree-viewer .ped-male {
    background: none repeat scroll 0 0 #CCEEFF;
    padding: 3px;
    width: 20%;
}
#pb-pedigree-viewer .ped-female {
    background: none repeat scroll 0 0 #ffe3e4;
    padding: 3px;
    width: 20%;
}

#pb-pedigree-viewer .pb-ped-animal-image {display:block; text-align:center; padding:3px 0 3px 0;}
#pb-pedigree-viewer .pb-ped-animal-image img {border:1px solid #111;}
#pb-pedigree-viewer .pb-ped-animal-name {font-weight:bold; padding: 2px 0;}
#pb-pedigree-viewer .pb-ped-pre-titles {line-height:1.2; display: block}
#pb-pedigree-viewer .pb-ped-post-titles {line-height:1.2; display: block}
#pb-pedigree-viewer .pb-ped-custom-fields {line-height:1.2; display: block; margin: 0; padding: 0; list-style-type: none; overflow-wrap: anywhere; word-break: break-word}

/*Make reCAPTCHA fit in the subscribe form - subscribe form defaults to 300px wide */
#form-1 .google-recaptcha {
    transform:scale(0.77);
    -webkit-transform:scale(0.77);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
}

/* Forms: Hide the form shortcode title since it's shown in the form now */
.shortcodebox.form .shortcodebox-title {
    display: none !important;
}

/* Forms: email and phone boxes match the text boxes on the original themes.
   Each theme's sjfb.css sizes input[type="text"] only, and these two are
   type="email" and type="tel" so phones show the right keyboard. BS5 forms
   (.pb-box) are sized by Bootstrap's .form-control and are left alone. */
.sjfb-form:not(.pb-box) input[type="email"],
.sjfb-form:not(.pb-box) input[type="tel"] {
    width: 100%;
    max-width: 500px;
    padding: 4px;
}

/* Animal titles & records: the one-line (Hor) lanes.

   These rules live HERE rather than in the themes because every site carries
   its own copy of its theme under content/themes/, and those copies drift:
   a site installed before the one-line lanes existed has no rule for them at
   all, so records the breeder marked "one line" render stacked. This file is
   loaded by every theme, legacy and BS5, on every page, so one copy fixes the
   whole fleet.

   Both class conventions are covered - legacy themes get "records preTitleHor",
   BS5 themes get "pb-records pb-preTitleHor". The doubled class is deliberate:
   the theme stylesheet loads AFTER this one, so matching its specificity would
   lose on source order. Two classes beat its one. */

ul.records.preTitleHor li,
ul.records.postTitleHor li,
ul.records.registrationHor li,
ul.pb-records.pb-preTitleHor li,
ul.pb-records.pb-postTitleHor li,
ul.pb-records.pb-registrationHor li {
    display: inline-block;
}

/* The separator between one-line records is emitted server-side now (a comma
   plus a real space, from format_animal_titles). Theme copies that still carry
   the old `li:after { content: "\00a0" }` would add a second gap on top of it,
   so it is switched off here for good. Removing it from the theme files only
   helps sites installed after the edit. */

ul.records.preTitleHor li::after,
ul.records.postTitleHor li::after,
ul.records.registrationHor li::after,
ul.pb-records.pb-preTitleHor li::after,
ul.pb-records.pb-postTitleHor li::after,
ul.pb-records.pb-registrationHor li::after {
    content: none;
}

/* Make menu placeholders have default cursor */
.menu-placeholder > a {
    cursor: default;
}

/* Breadcrumbs */
ul.pb-breadcrumbs, .pb-breadcrumbs li  {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
}

.pb-breadcrumbs li {
    display: inline;
}

/* FEE Color Controls */
.pb-admin-controls a.btn,
.pb-admin-controls a:visited.btn {
    color: #fff !important;
}

@media (max-width: 800px) {
    #pb-pedigree-viewer {
        padding: 2px;
    }
    #pb-pedigree-viewer table {
        margin: 0;
        width: 100%;
        line-height: 1.2;
    }
    #pb-pedigree-viewer .pedigree-builder-label {
        min-width: 100px;
    }
    #pb-pedigree-viewer table td,
    #pb-pedigree-viewer table td.spacer,
    #pb-pedigree-viewer table td.pb-ped-animal {
        padding: 2px;
        height: 15px;
        font-size: 80%;
    }
    #pb-pedigree-viewer .chart.swipe {
        background-image: url("../img/swipe-right.png");
        background-repeat: no-repeat;
        background-size: 90% auto;
    }
}

@media (max-width: 410px) {
    /*Make reCAPTCHA fit small devices*/
    .google-recaptcha {
        transform:scale(0.77);
        -webkit-transform:scale(0.77);
        transform-origin:0 0;
        -webkit-transform-origin:0 0;
    }
}


/* =========================================================================
   Animal list "Photo Grid" layout (v3, opt-in per list)
   -------------------------------------------------------------------------
   Added for the v3 Animal Lists module: a list whose layout is set to Photo
   Grid renders templates/lists-grid.twig instead of the classic one-per-row
   lists.twig. Lists left on Classic are untouched, so this section only ever
   applies to markup that did not exist before it.

   APPEND-ONLY and additive: no rule above this comment is modified. Every
   selector is compounded with .pb-list-grid / .pb-list-card, because this
   shared file loads BEFORE the per-tenant theme stylesheet and therefore has
   to out-specify it rather than rely on source order.

   Self-responsive via auto-fill, so no media queries are needed: the track
   count falls to 1 on a phone on its own.
   ========================================================================= */
.pb-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.25rem;
    margin: 0 0 1.5rem;
}
.pb-list-grid .pb-list-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem;
    min-width: 0;
}
.pb-list-grid .pb-list-card .pb-list-card-photo {
    display: block;
    width: 100%;
}
.pb-list-grid .pb-list-card .pb-list-card-photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.pb-list-grid .pb-list-card .no-image,
.pb-list-grid .pb-list-card .pb-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 140px;
    padding: 0.5rem;
}
.pb-list-grid .pb-list-card h3.name,
.pb-list-grid .pb-list-card h3.pb-name {
    margin: 0.5rem 0 0.25rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    max-width: 100%;
}
.pb-list-grid .pb-list-card .pb-btn-profile {
    margin-top: auto;
    align-self: center;
}

/* =========================================================================
   Custom-field sections on an animal profile (v3, opt-in per field group)
   -------------------------------------------------------------------------
   A custom-field group whose website setting is "Its own section" renders
   under the profile's details box as <div class="pb-cf-sections">: short
   facts side by side, paragraphs, and repeatable rows as a table (one card
   per row on a phone) or one line per row. Groups left on "Lines in the
   details box", the default, print exactly as before, so this section only
   ever applies to markup that did not exist before it.

   APPEND-ONLY and additive: every selector is compounded with
   .pb-cf-sections to out-specify the theme stylesheet that loads after this
   file. Lines and tints come from the theme's own text color (currentColor,
   with a plain grey first for browsers without color-mix), so light and dark
   themes both work. "Show all" is a visually hidden checkbox and its label,
   so it needs no script.
   ========================================================================= */
.pb-cf-sections {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin: 0 0 2.5rem;
}
.pb-cf-sections .pb-cf-section {
    min-width: 0;
}
.pb-cf-sections .pb-cf-section-title {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.25;
}
.pb-cf-sections .pb-cf-subtitle {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}
.pb-cf-sections .pb-cf-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0;
}
.pb-cf-sections .pb-cf-fact {
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 0.5rem;
    background: rgba(128, 128, 128, 0.06);
    background: color-mix(in srgb, currentColor 4%, transparent);
}
.pb-cf-sections .pb-cf-fact dt {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.75;
}
.pb-cf-sections .pb-cf-fact dd {
    margin: 0.25rem 0 0;
    font-size: 1.125rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.pb-cf-sections .pb-cf-fact dd img {
    max-width: 100%;
    height: auto;
}
.pb-cf-sections .pb-cf-prose {
    max-width: 50rem;
    margin: 0 0 1rem;
}
.pb-cf-sections .pb-cf-prose-body > :last-child {
    margin-bottom: 0;
}
.pb-cf-sections .pb-cf-rows {
    position: relative;
    margin: 0 0 1rem;
}
.pb-cf-sections .pb-cf-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}
.pb-cf-sections .pb-cf-table th {
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 2px solid currentColor;
    font-weight: 700;
    text-align: left;
    vertical-align: bottom;
}
.pb-cf-sections .pb-cf-table td {
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.35);
    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    vertical-align: top;
    overflow-wrap: anywhere;
}
.pb-cf-sections .pb-cf-table td:first-child {
    font-weight: 600;
}
.pb-cf-sections .pb-cf-lines {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(128, 128, 128, 0.35);
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.pb-cf-sections .pb-cf-lines li {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.35);
    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    overflow-wrap: anywhere;
}
.pb-cf-sections .pb-cf-extra {
    display: none;
}
.pb-cf-sections .pb-cf-more-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.pb-cf-sections .pb-cf-more-toggle:checked ~ .pb-cf-table .pb-cf-extra {
    display: table-row;
}
.pb-cf-sections .pb-cf-more-toggle:checked ~ .pb-cf-lines .pb-cf-extra {
    display: list-item;
}
.pb-cf-sections .pb-cf-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0.75rem 0 0;
    padding: 0.375rem 1rem;
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    cursor: pointer;
}
.pb-cf-sections .pb-cf-more .pb-cf-more-hide,
.pb-cf-sections .pb-cf-more-toggle:checked ~ .pb-cf-more .pb-cf-more-show {
    display: none;
}
.pb-cf-sections .pb-cf-more-toggle:checked ~ .pb-cf-more .pb-cf-more-hide {
    display: inline;
}
.pb-cf-sections .pb-cf-more-toggle:focus-visible ~ .pb-cf-more {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
@media (max-width: 575.98px) {
    .pb-cf-sections .pb-cf-facts {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
    }
    .pb-cf-sections .pb-cf-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .pb-cf-sections .pb-cf-table,
    .pb-cf-sections .pb-cf-table tbody,
    .pb-cf-sections .pb-cf-table tr,
    .pb-cf-sections .pb-cf-table td {
        display: block;
    }
    .pb-cf-sections .pb-cf-table tr {
        margin: 0 0 0.75rem;
        padding: 0.75rem 1rem;
        border: 1px solid rgba(128, 128, 128, 0.35);
        border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
        border-radius: 0.5rem;
    }
    .pb-cf-sections .pb-cf-table tr.pb-cf-extra {
        display: none;
    }
    .pb-cf-sections .pb-cf-more-toggle:checked ~ .pb-cf-table tr.pb-cf-extra {
        display: block;
    }
    .pb-cf-sections .pb-cf-table td {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.15rem 0;
        border: 0;
        text-align: right;
    }
    .pb-cf-sections .pb-cf-table td::before {
        content: attr(data-label);
        opacity: 0.75;
        text-align: left;
    }
    .pb-cf-sections .pb-cf-table td:first-child {
        display: block;
        text-align: left;
        font-weight: 700;
    }
    .pb-cf-sections .pb-cf-table td:first-child::before {
        content: none;
    }
    .pb-cf-sections .pb-cf-table td:empty {
        display: none;
    }
}