/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *\
>-----------------------------------------------------------------------------
| Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.                 |
| <mike@bestsignsupply.com> <hello@merchstudio.app>                           |
| All rights reserved.                                                        |
>-----------------------------------------------------------------------------
| VERSION 0.01                                                                |
>-----------------------------------------------------------------------------
| This software is the proprietary information of MerchStudio Inc.            |
| Unauthorized copying or distribution is strictly prohibited.                |
\* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
 * Styles: Policy pages
 *
 * Shared by the four required storefront policy pages -- terms, privacy,
 * shipping and refunds. Those pages are content-block items in the
 * database, so their styling lives here rather than inside each one: a
 * rule fixed here reaches every install through an update, while a rule
 * inside an item is frozen in a database row we cannot reach.
 *
 * Colours come from the theme, so a policy page follows the store's
 * palette instead of sitting as a bright white card in a dark
 * storefront. Each property carries a fallback matching the light
 * theme, so the page still reads correctly if the theme system is off.
 *
 * The card uses --base rather than --bg so it separates from the page
 * behind it; --bg is the page itself, and a card the same colour as its
 * background is just a bordered region.
 *
 * Everything is scoped under .policy-page so a policy block can sit
 * inside any theme without its rules leaking outward.
 *
 * @package     MerchStudio
 * @subpackage  Client.Styles
 * @author      Michael L. White <mike@bestsignsupply.com>
 * @license     https://merchstudio.app/license.txt
 * @version     policy.css - 0.01 - 08-11-2026 - totaltec
 * @link        https://merchstudio.app/
 */
.policy-page {
    color: var(--text, #222222);
    width: 100%;
    box-sizing: border-box;
}
.policy-page *,
.policy-page *::before,
.policy-page *::after {
    box-sizing: border-box;
}
.policy-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 20px;
    text-align: center;
}
.policy-section h2 {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 18px auto;
    font-size: 30px;
    line-height: 1.2;
    text-align: center;
}
.policy-section h3 {
    width: 100%;
    max-width: 900px;
    margin: 30px auto 12px auto;
    font-size: 22px;
    line-height: 1.25;
    text-align: left;
}
.policy-section p,
.policy-section li {
    line-height: 1.6;
    font-size: 16px;
}
.policy-intro,
.policy-hero-content p {
    display: block;
    width: 100%;
    max-width: 760px;
    margin: 0 auto 36px auto !important;
    text-align: center !important;
}
.policy-hero {
    padding-top: 50px;
}
.policy-hero-content {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}
.policy-logo {
    display: block;
    max-width: 600px;
    width: 100%;
    height: auto;
    margin: 0 auto 40px auto;
}
.policy-card {
    background: var(--base, #ffffff);
    border: 1px solid var(--line, #e1e5ea);
    border-radius: 14px;
    padding: 34px 30px;
    text-align: left;
    box-shadow: 0 8px 24px var(--shadow, rgba(0, 0, 0, 0.045));
    max-width: 1000px;
    margin: 0 auto;
}
.policy-card p {
    margin: 0 0 16px 0;
}
.policy-card ul {
    margin: 0 0 18px 22px;
    padding: 0;
}
.policy-card a {
    color: var(--link, #0073c8);
    font-weight: 700;
}
.policy-card a:hover {
    color: var(--link_hover, #0056b3);
}
.policy-divider {
    border: 0;
    border-top: 1px solid var(--line, #d8dee6);
    max-width: 1200px;
    margin: 0 auto;
}
.policy-updated {
    /* Deliberately not --text: this line is secondary to the body copy.
       --middle_grey is a global, so it reads correctly in both themes. */
    font-weight: 700;
    color: var(--middle_grey, #334155);
    text-align: center !important;
}
@media only screen and (max-width: 900px) {
    .policy-section {
        padding: 38px 16px;
    }
    .policy-section h2 {
        font-size: 25px;
    }
    .policy-card {
        padding: 26px 18px;
    }
}