/*poetry_styles.css */

/*
   Custom styles for the poetry app by GS
   Make sure to load this css LAST
   and to run 'collectstatic' after any change
*/

body {
    direction: rtl;
    text-align: right;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #E3EAF5; /* E3EAF5 F1F8FF FAF3E3 E1F5FF BEE8F4  https://htmlcolorcodes.com */
    color: #4270B9;
    /* text color: #4270B9; */
    /*background-image: url("../images/bg-vintage-paper-a1.jpg");*/
    /* Use relative path to move from css static folder to images folder as in the line above *
    /* (The lines below are not working well) */
    /*background-image: url("/static/poetry-static/poetry/images/bg-vintage-paper-a1.jpg");*/
    /*background-image: url("https://f004.backblazeb2.com/file/poetry-static/poetry/images/bg-vintage-paper-a1.jpg");*/
}

a {
    color: #4270B9;
    text-decoration: none; /* no underline */
}


/* RTL input text box*/

.rtl-input {
    direction: rtl;
    text-align: right;
}

.home-about {
    background-color: #F1F8FF;
    margin-bottom: 0;
}

.home-daily-article {
    background-color: #F1F8FF;
    height: 550px;
    overflow: hidden;
    margin-bottom: 0;
}

.home-daily-poem {
    background-color: #F1F8FF;
    height: 550px;
    overflow: hidden;
    margin-bottom: 0;
}

.home-daily-poem.no-picture {
    height: 550px; /* if you want same value — or a different one */
}

.home-daily-poem-header {
    color: #FFFFFF; /* text color */
    background-color: #6d8fbc; /* #cff4fc; */
    /*border-color: #707E88; !* #b6effb; *!*/
    border-color: transparent !important;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    position: relative;
    padding: 0.5rem 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid;
    border-radius: .5rem;
}

.home-daily-poem-body {
    height: 260px;
}

/* When there is no picture */
.home-daily-poem-body.no-picture {
    height: 260px; /* desktop size */
}

.home-two-cols {
    width: 75%;
    margin: 0 auto; /* centers horizontally */
    /*display: flex;*/
    /*flex-direction: row;*/
    /*justify-content: space-between;*/
}

.home-latest-comments-box-body {
    height: 540px;
    overflow-y: hidden;
}

.home-latest-comments-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    /*overflow-y: hidden;*/
    white-space: normal;
}

.articles-list-card-header {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.header-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: auto;
    /* text logo only */
    max-width: 260px;
    max-height: 80px;
    /* typewriter logo */
    /*max-width: 450px;*/
    /*max-height: 120px;*/
}

.hr-logo {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    height: 3px;
    background-color: #FE4F70;
    border: none;
}

.repeat-waves {
    width: 75%;
    height: 10px; /* height of your bar */
    background-image: url("https://f004.backblazeb2.com/file/poetry-static/poetry/images/wave_double.svg");
    /*background-image: url("{% static "poetry/images/wave_double.svg"%});*/
    background-repeat: repeat-x; /* repeat horizontally */
    /*background-size: auto 100%;  !* scale to fit height *!*/
}


.poem-text {
    font-size: 16px;
    color: #707E88
}


/*=== Styles for list_poems view ===*/

.list-poem-contents {
    overflow: hidden;
    transition: max-height 0.5s ease;
    will-change: max-height;
}

/* toggle more / less */

a.toggle-link,
a.toggle-link:link,
a.toggle-link:visited,
a.toggle-link:active,
a.toggle-link:focus {
    color: #0a4ca0;
    text-decoration: none;
}

a.toggle-link:hover {
    color: #203656;
    text-decoration: none;
}

.poem-details-title {
    color: #707a88;
    margin-bottom: 0;
    margin-top: 0;
    /*padding-right: 30px;*/
    font-size: 2.5em;
}

.poem-details-subtitle {
    color: #707a88;
    margin-bottom: 0;
    margin-top: 0;
    padding-right: 30px;
    padding-top: 10px;
    font-size: 1.75em;
}


.poem-details-abstract_container {
    width: 75%;
}

.poem-details-abstract {
    color: #707a88;
    margin-bottom: 0;
    margin-top: 0;
    padding-right: 30px;
    font-size: 1em;
    line-height: 1.5 !important;
}

.poem-details-abstract-label {
    font-size: 1em;
    color: #ffffff;
    background-color: #6d8fbc; /* 97a6c3 */
    margin-right: 30px;
    /*background: linear-gradient(*/
    /*        to bottom,*/
    /*        #4270B9 50%, !* outside color (top half) *! #ffffff 50% !* inside color (bottom half) *!*/
    /*);*/
}

.special_page_header {
    color: #FFFFFF;
    width: 60%;
    margin: 0 auto; /* centers the box horizontally */
    margin-bottom: 10px;
    text-align: center; /* centers the text inside */
    padding: 4px 0;
    font-size: 2rem;
    border-style: solid;
    border-radius: 12px; /* rounded corners */
    border-width: 0;
    border-color: #000000;
    background-color: #FE4F70 !important;
}

.special_page_sub_header {
    color: #000000;
    width: 60%;
    margin: 0 auto; /* centers the box horizontally */
    margin-bottom: 10px;
    text-align: right; /* centers the text inside */
    padding: 8px 16px;
    font-size: 1rem;
    border-style: solid;
    border-radius: 12px; /* rounded corners */
    border-width: 0;
    border-color: #000000;
    background-color: #fdf1cb !important;
    line-height: 1.3; /* or 1.2, or even 1.0 */
}

.poem-details-author,
.poem-details-year,
.poem-details-type {
    color: #000000 !important;
    /*padding-right: 30px;*/
    margin-top: 0;
    font-size: 1em;
}

.poem-details-author,
.poem-details-year,
.poem-details-type :hover {
    color: inherit;
}


.poem-list-title {
    font-size: x-large;
    color: #FE4F70;
}


/*=================================================================*/
/*             Top Menu - based on bootstrap navbar                */
/*=================================================================*/


/* Default (lg and up): let the frame wrap the menu and center it */
.navbar {
    /*background-color: #E3EAF5;*/
    /*background-color: #FE4F70;*/
    /*background-color: #85abe0;*/
    background-color: #d2d5e6;
    color: #000000 !important; /* text color */
    /*color: #FFFFFF !important; !* text color - change also in .nav-link *!*/
    border-style: solid;
    border-width: 0;
    border-radius: 20px; /* rounded background */
    border-color: #000000;
    width: fit-content; /* grow to fit the menu */
    max-width: 50%;
    /*max-width: 100%; !* don’t overflow viewport *!*/
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
}

.nav-link {
    /*color: #FFFFFF !important; !* text color *!*/
    color: #000000 !important; /* text color - change also in .navbar */
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 10px;
    padding: 8px;
}

/* Hover effect */
.nav-link:hover {
    background-color: #cbdffc;
    /*background-color: rgba(255, 255, 255, 0.15); !* soft white overlay *!*/
    /*color: #ffffff !important;*/
    color: #FE4F70 !important;
}

/* Active (selected) effect */
.nav-link.active {
    background-color: #70a8f3 !important;
    /*background-color: #e68195 !important;*/
    color: #ffffff !important;
    font-weight: 600;
}

.nav-button {
    background: #b3b3b3;
    border: 2px;
    margin: 0;
    color: #000000;
    /*color: #FFFFFF;*/
    cursor: pointer;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-burger-text {
    color: #000000;
    margin-right: 10px !important;
}


/*=================================================================*/
/*             Poem Contents in poem details page                  */
/*          based on about-author from katen template              */
/*=================================================================*/


.poem-title {
    color: #4270B9;
    margin-bottom: 0.3em;
}

.poem-contents {
    background: #F1F8FF;
}

.poem-contents:last-child {
    margin-bottom: 0;
}

.poem-contents.child {
    margin-left: 60px;
}

.poem-contents .thumb {
    float: left;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    overflow: hidden;
}

.poem-contents .details {
    margin-left: 130px;
}

.poem-contents .details h4.name {
    font-size: 20px;
    margin: 0 0 10px;
}

.poem-contents .details h4.name a {
    color: #203656;
}

.poem-contents .details h4.name a:hover {
    color: #FE4F70;
}

.poem-contents .details p {
    margin-bottom: 10px;
}

.poem-contents .author-link {
    font-size: 16px;
    font-weight: 700;
}

.poem-contents .author-link i {
    font-size: 12px;
    vertical-align: middle;
    margin-left: 10px;
}

.poem-contents .picture {
    float: left;
    display: block;
    max-height: 550px;
    max-width: 300px;
    margin-right: 20px;
    margin-bottom: 20px;
}


.author-page-bio {
    background: #EFF6FDFF;
    width: 75%;
}

.author-page-bio:last-child {
    margin-bottom: 0;
}

.author-page-bio.child {
    margin-left: 60px;
}

.author-page-bio .thumb {
    float: left;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    overflow: hidden;
}

.author-page-bio .details {
    margin-left: 130px;
}

.author-page-bio .details h4.name {
    font-size: 20px;
    margin: 0 0 10px;
}

.author-page-bio .details h4.name a {
    color: #203656;
}

.author-page-bio .details h4.name a:hover {
    color: #FE4F70;
}

.author-page-bio .details p {
    margin-bottom: 10px;
}

.author-page-bio .author-link {
    font-size: 16px;
    font-weight: 700;
}

.author-page-bio .author-link i {
    font-size: 12px;
    vertical-align: middle;
    margin-left: 10px;
}

.author-page-bio .picture {
    float: left;
    display: block;
    max-height: 550px;
    max-width: min(300px, 100%);
    margin-right: 20px;
    margin-bottom: 20px;
}

.author-page-box {
    background-color: #F1F8FF;
    height: 350px;
    overflow: hidden;
    margin-bottom: 0;
}

.author-page-box-header {
    color: #FFFFFF; /* text color */
    background-color: #6d8fbc; /* #cff4fc; */
    /*border-color: #707E88; !* #b6effb; *!*/
    border-color: transparent !important;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    position: relative;
    padding: 0.5rem 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid;
    border-radius: .5rem;
}

.author-page-box-body {
    height: 270px;
    overflow-y: hidden;
}

.daily-poem-contents {
    background: #F1F8FF;
}


/*=================================================================*/
/*                      EDITOR REVIEW                              */
/*          based on about-author from katen template              */
/*=================================================================*/
.editor-review {
    background: #F1F8FF;
    padding: 30px;
    /*margin-right: 30px;*/
}

.editor-review:last-child {
    margin-bottom: 0;
}

.editor-review.child {
    margin-left: 60px;
}

.editor-review .thumb {
    float: left;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    overflow: hidden;
}

.editor-review .thumb-big {
    float: left;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    overflow: hidden;
}

.editor-review .details {
    text-align: right;
    /*margin-left: 30px;*/
}

.editor-review .details h4.name {
    font-size: 20px;
    margin: 0 0 10px;
}

.editor-review .details h4.name a {
    color: #203656;
}

.editor-review .details h4.name a:hover {
    color: #FE4F70;
}

.editor-review .details p {
    margin-bottom: 10px;
}

.editor-review .author-link {
    font-size: 16px;
    font-weight: 700;
}

.editor-review .author-link i {
    font-size: 12px;
    vertical-align: middle;
    margin-left: 10px;
}

.poem-details-bio {
    text-align: right;
}

.poem-details-bio-social-links {
    text-align: center;
    direction: ltr;
}


/*=================================================================*/
/*                     tag input buttons                           */
/*=================================================================*/

/* Container */
.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Base chip */
.tag-btn {
    --tag-color: var(--bs-primary);
    --tag-color-rgb: var(--bs-primary-rgb);
    display: inline-block;
    padding: .25rem .6rem;
    border: 1px solid var(--tag-color);
    color: var(--tag-color);
    background-color: transparent;
    border-radius: 9999px; /* pill */
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}

.tag-btn:hover {
    background-color: rgba(var(--tag-color-rgb), .06);
}

/* Checked/selected state (paired with a hidden checkbox) */
.btn-check:checked + .tag-btn {
    background-color: var(--tag-color);
    color: #fff;
    border-color: var(--tag-color);
}

.btn-check:focus + .tag-btn {
    box-shadow: 0 0 0 .2rem rgba(var(--tag-color-rgb), .25);
}

/* Disabled */
.btn-check:disabled + .tag-btn {
    opacity: .65;
    pointer-events: none;
}

/* Sizes */
.tag-btn--sm {
    padding: .15rem .5rem;
    font-size: .875rem;
}

.tag-btn--lg {
    padding: .35rem .8rem;
    font-size: 1rem;
}

/* Color modifiers (use Bootstrap theme vars) */
.tag-btn--primary {
    --tag-color: var(--bs-primary);
    --tag-color-rgb: var(--bs-primary-rgb);
}

.tag-btn--secondary {
    --tag-color: var(--bs-secondary);
    --tag-color-rgb: var(--bs-secondary-rgb);
}

.tag-btn--success {
    --tag-color: var(--bs-success);
    --tag-color-rgb: var(--bs-success-rgb);
}

.tag-btn--warning {
    --tag-color: var(--bs-warning);
    --tag-color-rgb: var(--bs-warning-rgb);
}

.tag-btn--danger {
    --tag-color: var(--bs-danger);
    --tag-color-rgb: var(--bs-danger-rgb);
}

.tag-btn--info {
    --tag-color: var(--bs-info);
    --tag-color-rgb: var(--bs-info-rgb);
}

/* Optional: muted unselected with blue selected
   (border/text neutral until checked) */
.tag-btn--muted {
    --tag-color: var(--bs-border-color);
    --tag-color-rgb: 108, 117, 125; /* fallback if --bs-border-color-rgb not present */
    color: var(--bs-body-color);
}

.btn-check:checked + .tag-btn--muted {
    --tag-color: var(--bs-primary);
    --tag-color-rgb: var(--bs-primary-rgb);
}

.block-header {
    color: #FE4F70;
}


/* Kill bullets for pagination entirely */
.pagination, .pagination li {
    list-style: none !important;
}

/* Remove default UL padding on RTL pages so no marker gutter remains */
.pagination {
    padding: 0 !important; /* or padding-right: 0; */
    margin: 0;
}

.pagination li::marker {
    content: none;
}


.yellow-marker {
    display: inline;
    background-image: linear-gradient(
            #ffe066 0%,
            #ffe066 95%,
            transparent 85%
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 1.3; /* creates the gap between yellow bands */
    padding: 0 .2em;
}

.directory-table-card-header {
    background-color: #f8f9fa; /* Bootstrap card-header light gray, or slightly darker: #e9ecef */
}

.directory-table-card-header th {
    font-weight: 600;
    color: #212529; /* Bootstrap body text color */
    border-bottom: 1px solid #dee2e6; /* Bootstrap border color */
    vertical-align: middle;
}

/* RTL */
.directory-.table-card-rtl {
    direction: rtl;
}

/* Remove double top border between card and table */
.directory-.table-card-rtl table {
    border-top: 0;
}


.pricing-wrap-rtl {
    direction: rtl;
}

/* Toggle pill */
.pricing-toggle {
    background: #eefaf3;
    padding: 8px;
    border-radius: 999px;
    display: inline-flex;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}

.pricing-toggle-btn {
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 600;
    color: #6d8fbc;
    background: transparent;
    border: 0;
}

.pricing-toggle-btn.active {
    background: #FE4F70;
    color: #FFFFFF;
}

/* Card look */
.pricing-card {
    border: 0;
    border-radius: 24px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .10);
}

.pricing-title {
    font-weight: 700;
    font-size: 24px;
    color: #111827;
}

/* Icon circle */
.pricing-icon {
    width: 74px;
    height: 74px;
    border-radius: 999px;
    background: #FE4F70;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pricing-icon-mark {
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

/* Price */
.pricing-price {
    color: #0f172a;
}

.pricing-currency {
    font-size: 24px;
    font-weight: 700;
    vertical-align: baseline;
    margin-left: 4px;
}

.pricing-amount {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: .5px;
}

.pricing-period {
    color: #6b7280;
    font-weight: 600;
    font-size: 13px;
    margin-right: 6px;
}

/* Features */
.pricing-features {
    color: #6b7280;
    font-size: 14px;
    line-height: 2;
    list-style: none; /* remove bullets */
    padding: 0; /* remove left/right indent */
    margin: 0; /* clean spacing */
}

.pricing-features li::marker {
    content: ""; /* kill browser marker */
}

.pricing-features strong {
    color: #111827;
}

.pricing-desc {
    font-size: 20px;
    margin-top: 8px;
    color: #94a3b8;
    line-height: 1.5;
    height: 100px; /* ← fixed height */
    overflow: hidden; /* hide extra text */
}

/* CTA button */
.pricing-cta {
    background: #FE4F70;
    border: 0;
    color: #fff;
    font-weight: 700;
    padding: 12px 14px;
    border-radius: 999px;
}

.pricing-cta:hover {
    background: #179a5f;
    color: #fff;
}

.notifications-dropdown {
}


/* Ring animation: swings around a point near the top of the bell */
.notifications-bell-ring {
    transform-origin: 50% 15%; /* near the top of the bell */
    animation: notificationsBellRing 1.2s ease-in-out infinite;
    animation-iteration-count: 10; /* stop after this number of rings */
}

/* Optional: respect reduced-motion in cases user asked for reduced animations in his device */
@media (prefers-reduced-motion: reduce) {
    .notif-bell-ring {
        animation: none;
    }
}

@keyframes notificationsBellRing {
    0% {
        transform: rotate(0deg);
    }
    6% {
        transform: rotate(18deg);
    }
    12% {
        transform: rotate(-16deg);
    }
    18% {
        transform: rotate(14deg);
    }
    24% {
        transform: rotate(-12deg);
    }
    30% {
        transform: rotate(10deg);
    }
    36% {
        transform: rotate(-8deg);
    }
    42% {
        transform: rotate(6deg);
    }
    48% {
        transform: rotate(-4deg);
    }
    54% {
        transform: rotate(2deg);
    }
    60% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
    /* pause between rings */
}

.notifications-dropdown-header {
    font-size: 1em;
}

.notifications-dropdown-accordion-button {
    padding-inline-start: 1.75rem;
    padding-inline-end: 1.75rem;
}


.notifications-dropdown-subject {
    max-width: 320px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 👈 number of lines */
    overflow: hidden;
    line-height: 1.4;
}


/*=================================================================*/
/*                settings for small screens                     */
/*                      max-width: 550px                           */
/*=================================================================*/

@media only screen and (max-width: 550px) {

}


/*=================================================================*/
/*                settings for medium screens                      */
/*                     max-width: 767px                            */
/*=================================================================*/


@media only screen and (max-width: 767px) {
    .poem-contents .details {
        margin-left: 0;
        margin-top: 20px;
        overflow: hidden; /* keeps text from wrapping under floated img */
        text-align: right; /* since your text is Hebrew */
    }

    .poem-contents .picture {
        float: none !important; /* cancel .alignleft */
        display: block;
        margin: 0 auto 20px !important; /* equal left/right margins */
        margin-inline: auto;
        max-width: min(260px, 100%);
        height: auto;
    }

    .author-page-bio .details {
        margin-left: 0;
        margin-top: 20px;
        overflow: hidden; /* keeps text from wrapping under floated img */
        text-align: right; /* since your text is Hebrew */
    }

    .author-page-bio .picture {
        float: none !important; /* cancel .alignleft */
        display: block;
        margin: 0 auto 20px !important; /* equal left/right margins */
        margin-inline: auto;
        max-width: min(260px, 100%);
        height: auto;
    }

}


/*=================================================================*/
/*                settings for medium+ screens                     */
/*              max-width: 991.98px (was 767px)                    */
/*=================================================================*/


@media only screen and (max-width: 991.98px) {
    /* was (max-width: 767px } */
    /* the following 2 lines are probably errors*/
    /*max-width: 300px;*/
    /*max-height: 1600px;*/
    .header-logo {
        max-width: 220px !important;
        max-height: 70px !important;
    }

    .poem-details-title {
        padding-right: 0;
        margin-bottom: 10px !important;
        /*line-height: 1 !important;*/
        text-align: center;
        font-size: 1.5em;
    }

    .poem-details-subtitle {
        padding-right: 0;
        padding-top: 10px;
        text-align: center;
        font-size: 1.2em;
        /*line-height: 1;*/
    }

    .poem-details-abstract_container {
        width: 90%;
    }

    .poem-details-abstract {
        margin-bottom: 6px !important;
        padding-right: 0;
        padding-bottom: 4px !important;
        line-height: 1.3 !important;
        text-align: right;
        font-size: 1em;
    }

    .author-page-bio {
        width: 100%;
    }

    .poem-details-author {
        /*padding-right: 0;*/
        margin-top: 5px;
        text-align: center;
    }

    .poem-details-year {
        /*padding-right: 0;*/
        text-align: center;
    }

    .special_page_header {
        width: 85%;
    }

    .special_page_sub_header {
        width: 85%;
    }

    .poem-contents .thumb {
        float: none;
        margin: auto;
    }

    .author-page-bio .thumb {
        float: none;
        margin: auto;
    }

    .editor-review .thumb {
        float: none;
        margin: auto;
    }

    .editor-review .details {
        margin-left: 0;
        margin-top: 20px;
        text-align: right;
        /*text-align: center;*/
    }

    .navbar {
        min-width: 60px !important;
        max-width: 80% !important;
        width: 80% !important;
    }

    .home-daily-poem {
        height: 780px;
    }

    .home-daily-poem.no-picture {
        height: 550px !important; /* if you want same value — or a different one */
    }

    .home-daily-poem-body {
        height: 490px;
    }

    .home-daily-poem-body.no-picture {
        height: 260px !important; /* if you want same value — or a different one */
    }

    .home-two-cols {
        width: 100%;
    }

    .home-latest-comments-text {
        -webkit-line-clamp: 3; /* ~100 chars */
    }

    .notifications-dropdown {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 200px !important; /* adjust if needed (below your navbar) */
        width: 90vw !important;
        max-width: 90vw !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        max-height: 70vh;
        overflow: auto;
    }

    /* overrides horizontal padding of .widget from Katan template css */
    .widget {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

}

