/* Blog listing page — 1:1 port of legacy
   AMRI.WebProject/Content/Styles/custom-style.css §"Blog Index" + §"Blog Item List By Tag"
   + the responsive @media query at ≤768px. Selectors preserved verbatim so the legacy
   markup ported in _BlogPostCard.cshtml + BlogListing.cshtml matches without rework.
   No SASS during port phases (feedback_css_no_sass_during_port). */

/* Blog Index — category dropdown (Commit C; included here so Commit A doesn't have to
   touch this file again when the dropdown lands) */
.post-type-dropdown {
    padding: 0 0 2% 5%;
}

.post-type-dropdown-header {
    margin-right: 8px;
    font-size: 20px;
    line-height: 160%;
    font-weight: 700;
    width: fit-content;
    display: flex;
    padding-bottom: 5px;
    color: #595959;
}

.post-type-dropdown-header .caret-down {
    transform: scale(0.6);
    padding-top: 2px;
}

.post-type-dropdown-header.active-dropdown,
.post-type-menu .js-post-type:hover {
    cursor: pointer;
    color: #bd1e2b;
}

.post-type-menu {
    position: absolute;
    display: none;
    padding: 25px 25px 20px;
    border-radius: 10px;
    background-color: #f1f1f1;
    box-shadow: 0 0 10px 0 hsl(0deg 0% 52% / 78%);
    width: fit-content;
}

.post-type-menu .js-post-type {
    margin-bottom: 10px;
    font-size: 15px;
    width: fit-content;
}

.posts-container .btn-2 {
    padding: 6px 12px;
    border-radius: 20px;
}

/* Blog Item List By Tag — the load-bearing card layout */
.post-list {
    display: flex;
    flex-direction: column;
}

/* `!important` defeats global.css's catch-all `h2 { color:#982632 }` rule
   (the v2 CSS load order puts global.css AFTER this file). Matches legacy
   custom-style.css line 234. Keeping the global h2's `text-transform:
   uppercase` + `font-family` intact — legacy inherits both. */
.post-list .post-title {
    margin-top: 20px;
    line-height: 160%;
    color: #000 !important;
    font-size: 32px !important;
}

.post-list .post-date {
    font-weight: 700;
    font-style: normal;
    color: #333;
}

/* Body excerpt color — legacy custom-style.css:815. Defeats the parent
   `<a>` color inherited from global.css's `a { color:#ec6371 }` rule. */
.post-content-link {
    color: #6d6d6d;
    text-decoration: none;
    outline: none;
}

/* `.post-content p` is hit by the global `p { font-family: trade-gothic-next }`
   rule in v2-overrides.css. Without an explicit selector the inner <p>
   loses the parent .post-content-link's condensed family. Match legacy
   prodclone (trade-gothic-next-condensed at 16px) by re-asserting the
   family at the selector specificity that wins. */
.post-list .post-content,
.post-list .post-content p {
    color: #6d6d6d;
    font-family: 'trade-gothic-next-condensed', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
}

.post-list article {
    padding: 5%;
}

.post-list article:hover {
    border-radius: 20px;
    background-color: #f1f1f1;
    cursor: pointer;
}

.post-list .post-image {
    width: 100%;
    max-width: 500px;
    height: 100px;
}

.post-list .post-image img {
    height: 100%;
    object-fit: contain;
}

.post-list .blog-post-default-image {
    margin-left: 5px;
}

#post-list-div > p i {
    margin: 0 0 2% 5%;
}

#post-list-div #no-posts-message {
    margin-bottom: 130px;
}

/* Load More button wrapper — legacy .side-lines visual treatment lives in main.css;
   only the spacing override below is listing-specific. */
.posts-container .side-lines {
    margin-top: 30px;
    text-align: center;
}

/* Sidebar — 1:1 port of legacy custom-style.css:187-253. The sidebar markup
   in BlogListing.cshtml + the three sidebar partials matches legacy class-
   for-class, so the rules below pick up the visible styling (heading, study
   guide CTA, featured posts list, question form) that was missing from
   the v2 port. */
#blog-index-sidebar h3.heading-58 {
    margin-bottom: 5%;
    text-align: center;
    color: #000;
    font-size: 24px;
    line-height: 30px;
}

/* Study Guide CTA */
.study-guide-section.whitepaper-feature {
    display: flex;
    margin: 0 10px 50px 0;
    padding: 0 10px 20px 10px;
    flex-direction: column;
    align-items: center;
    align-self: center;
}

.study-guide-section .study-guide-image {
    margin: 30px 0;
}

.study-guide-section .text-block-48 {
    margin-bottom: 5%;
    padding-right: 1.5%;
    padding-left: 1.5%;
    line-height: 22px;
    text-align: center;
    color: #595959;
}

.study-guide-section #study-guide-message-success {
    margin-top: 20px;
}

.study-guide-section .button-5 {
    background-color: #bd1e2b;
    border-radius: 30px;
    font-size: 18px;
    font-family: trade-gothic-next-condensed, sans-serif;
    padding: 12px 24px 15px;
    white-space: nowrap;
}

.study-guide-section .button-5:hover {
    background-color: #ec6371;
}

.study-guide-section .button-5:hover,
.study-guide-section .button-5:focus {
    color: white;
}

.study-guide-section .button-5.nopadding {
    margin-right: 0;
    margin-left: 0;
}

.study-guide-section .button-5.w-button {
    display: inline-block;
    color: white;
    border: 0;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* Featured Posts list */
.featured-posts {
    width: 100%;
    height: auto;
    padding-right: 10px;
}

.featured-posts hr {
    margin-top: 15px;
}

.featured-posts .link-block-2 {
    color: #000;
    text-decoration: none;
}

.featured-posts .link-block-2:hover {
    color: #bd1e2b;
}

.featured-posts .collection-item {
    margin-bottom: 10px;
    padding-top: 5px;
    color: #414141;
    font-size: 16px;
    line-height: 140%;
    text-decoration: none;
}

.featured-posts .w-inline-block {
    max-width: 100%;
    display: inline-block;
}

/* Have a Question form */
.question-form {
    width: 100%;
    height: 500px;
    margin-top: 50px;
}

.question-form .text-block-58 {
    line-height: 120%;
    text-align: center;
    color: #595959;
}

.question-form #send-blog-question-messages {
    margin-top: 10px;
}

/* Inline submit feedback (rendered by amri-blog-list.ts). The success + error
   classes carried no styling, so the confirmation message rendered as bare
   unstyled text. Give them the same small message-block treatment as the other
   AJAX forms. */
.question-form #send-blog-question-messages p {
    margin: 0 0 8px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
}

.question-form #send-blog-question-messages p:last-child {
    margin-bottom: 0;
}

.question-form #send-blog-question-messages .blog-question-success {
    color: #1b5e20;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
}

.question-form #send-blog-question-messages .amri-form-field-error {
    color: #bd1e2c;
    background: #fdecea;
    border: 1px solid #f3c2c2;
}

.question-form .form-row {
    margin-bottom: 10px;
    padding-right: 0;
    width: 100%;
}

.question-form .form-row textarea {
    height: 4em;
}

.question-form .form-row textarea,
.question-form .form-row input {
    max-width: 300px;
    border: 1px solid #d9d9d9 !important;
    box-shadow: inset 0 0 5px 0 #eee;
}

.question-form .form-row textarea:focus {
    box-shadow: 0 0 6px #faaf4080;
    border: 1px solid #faaf40;
}

.question-form .submit-button {
    padding: 12px 24px 15px;
    border-radius: 30px;
    background-color: #5f5f5f;
    text-align: center;
    color: white;
    border: none;
    width: fit-content;
    margin-top: 15px;
}

.question-form .submit-button:hover {
    cursor: pointer;
    background-color: #82828e;
}

.question-form label {
    display: inline-block;
}

.question-form form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

/* The form centres its flex children, but the reCAPTCHA (a fixed-width widget)
   should line up with the left edge of the input fields, not float centred. */
.question-form .g-recaptcha {
    align-self: flex-start;
}

/* Responsive — image becomes 28.5vw at ≤768px (legacy line 496) */
@media (max-width: 768px) {
    .post-list .post-image {
        height: 28.5vw;
    }

    /* Stack the sidebar BELOW the content column on mobile. v2's CSS load
       order puts global.css (with the .sidebar-layout > float rules) after
       responsive.css's break-sidebar rule, so the responsive override gets
       beaten at equal specificity. `!important` here matches the legacy
       custom-style.css pattern (line 495) that survived the cascade. */
    .sidebar-layout .content,
    .sidebar-layout .sidebar {
        float: none !important;
        width: 100% !important;
    }

    .sidebar-layout .sidebar {
        margin-top: 25px;
        padding-top: 25px;
        border-top: 1px solid #dddddd;
    }

    /* Question-form input width unlocks on mobile to use available space
       (legacy custom-style.css:493) */
    .question-form .form-row textarea,
    .question-form .form-row input {
        max-width: initial;
    }
}