/* =============================================================
   CONTENT PAGES — UI refresh
   Pages: about-us, shipping, frequently-asked-questions,
          terms-and-conditions, privacy-policy,
          promotion-terms-and-conditions.

   These are plain WP pages rendered by understrap's page.php /
   fullwidthpage.php into:
       <article> <header class="entry-header"><h1 class="entry-title">
                 <div class="entry-content"> … the_content() … </div>
   Content is mostly <p>, <p><strong> pseudo-headings, links and
   lists. This file is enqueued ONLY on the pages above (see
   functions.php), so the generic .entry-* selectors don't leak to
   other posts/pages — that's why it isn't @imported by custom.css.

   Aligned with the site-wide redesign: Inter typography, red
   (#c8102e) link accents, neutral palette (#1a1a1a / #6b6b6b /
   #e5e5e5). See the redesign token set used by cart/checkout/etc.
   ============================================================= */

/* ---------- Inter everywhere in the article ---------------- */
.entry-header .entry-title,
.entry-content,
.entry-content * {
    font-family: 'Inter', sans-serif;
}

/* Font Awesome icons must keep their icon font — the Inter rule above
   also matches any .fa icon <span> and would blank it (square glyph).
   Re-assert FA4's font-family with higher specificity + !important. */
.entry-content .fa,
.entry-content [class^="fa-"],
.entry-content [class*=" fa-"] {
    font-family: 'FontAwesome' !important;
}

/* ---------- Page title ------------------------------------- */
.entry-header { margin-bottom: 1.5rem; }
.entry-title {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: #1a1a1a;
    margin-top: 0.5rem;
}
@media (min-width: 768px) {
    .entry-title { font-size: 40px; }
}

/* ---------- Body copy -------------------------------------- */
.entry-content {
    color: #1a1a1a;
    font-size: 16px;
    line-height: 1.75;
}
.entry-content p { margin-bottom: 1.1rem; }
.entry-content p:last-child { margin-bottom: 0; }

/* Sub-headings (used if the content has real headings) */
.entry-content h2 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: #1a1a1a;
    margin: 2rem 0 0.75rem;
}
.entry-content h3 {
    font-size: 21px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 1.75rem 0 0.6rem;
}
.entry-content h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 1.5rem 0 0.5rem;
}

/* <strong> used as inline pseudo-headings (FAQ questions, T&C labels) */
.entry-content p strong,
.entry-content li strong {
    color: #1a1a1a;
    font-weight: 600;
}

/* ---------- Links — red accent ----------------------------- */
.entry-content a {
    color: #c8102e;
    text-decoration: none;
    transition: color 0.15s ease;
}
.entry-content a:hover {
    color: #a50d26;
    text-decoration: underline;
}

/* ---------- Lists ------------------------------------------ */
.entry-content ul,
.entry-content ol {
    margin: 0 0 1.1rem 1.25rem;
    padding-left: 1rem;
}
.entry-content li { margin-bottom: 0.5rem; }
.entry-content li:last-child { margin-bottom: 0; }

/* ---------- Tables (if any) -------------------------------- */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 15px;
}
.entry-content th,
.entry-content td {
    border: 1px solid #e5e5e5;
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}
.entry-content th {
    background: #f5f5f5;
    font-weight: 600;
    color: #1a1a1a;
}

/* ---------- Embeds (e.g. About Us YouTube video) ----------- */
.entry-content figure.wp-block-embed { margin: 0 0 1.5rem; }
.entry-content .wp-block-embed__wrapper { max-width: 100%; }

/* ---------- Separators ------------------------------------- */
.entry-content hr,
.entry-content .wp-block-separator {
    border: 0;
    border-top: 1px solid #e5e5e5;
    margin: 1.75rem 0;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 575px) {
    .entry-content { font-size: 15px; }
    .entry-content table { display: block; overflow-x: auto; }
}