/**
 * Shared tokens/typography for Lodha Times content, ported from
 * lodhatimes.com (theme lodhalife25). Everything here is scoped under
 * .lodha-times-content so it cannot affect the rest of the site - the
 * source theme applies these rules globally since it's a single-purpose
 * site, skypress is not.
 */

/*
* Registered as non-inheriting so a Content Section's own spacing doesn't
* leak into a nested Content Column that has no spacing of its own set -
* custom properties inherit by default, which was compounding padding
* (child fell back to the parent's value instead of 0). Matches
* lodhatimes.com's own @property declarations.
*/
@property --paddingTop {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
@property --paddingRight {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
@property --paddingBottom {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
@property --paddingLeft {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
@property --rowGap {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
@property --columnGap {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

@font-face {
    font-family: "Domaine Display";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/lodha-times/domaine-display-regular.woff2") format("woff2");
}
@font-face {
    font-family: "Domaine Display";
    font-weight: normal;
    font-style: italic;
    src: url("../fonts/lodha-times/domaine-display-regular-italic.woff2") format("woff2");
}

/*
* .editor-styles-wrapper is the block editor iframe's counterpart to
* .lodha-times-content - Gutenberg wraps the actual block content in that
* class (not ours) when add_theme_support('editor-styles') is active, so
* without it here none of these rules ever match inside the editor and the
* preview renders unstyled even though this file is correctly enqueued
* there (see enqueue_block_editor_assets in inc/blocks.php).
*/
.lodha-times-content,
.editor-styles-wrapper {
    --font-size-root: 15px;
    @media (min-width: 768px) {
        --font-size-root: 18px;
    }
    --font-size-max: calc(5.555 * var(--font-size-root));

    --container-max-width: 480px;
    --column-count: 30;
    --span: clamp(0px, 3.333cqw, 16px);
    --span1px: calc(var(--span) / 16);
    @media (min-width: 768px) {
        --container-max-width: 1440px;
        --column-count: 120;
        --span: clamp(0px, 0.8333cqw, 12px);
        --span1px: calc(var(--span) / 12);
    }

    --span-1x: calc(var(--span) * 1);
    --span-2x: calc(var(--span) * 2);
    --span-3x: calc(var(--span) * 3);
    --span-4x: calc(var(--span) * 4);
    --span-5x: calc(var(--span) * 5);
    --span-6x: calc(var(--span) * 6);
    --span-7x: calc(var(--span) * 7);
    --span-8x: calc(var(--span) * 8);
    --span-9x: calc(var(--span) * 9);
    --span-12x: calc(var(--span) * 12);
    --span-15x: calc(var(--span) * 15);

    /*
    * No container-type here: --span's cqw units need to resolve against
    * the real viewport (matching lodhatimes.com, which sets container-type
    * on its full-width <main> wrapper), not against this element's own
    * capped max-width (480px/1440px) - that would clamp --span to its
    * ceiling on every mobile viewport regardless of actual device width,
    * inflating every span-based padding/gap value site-wide.
    */
    font-family: "FuturaBT-Book", "Trebuchet MS", "Arial", sans-serif;
    font-style: normal;
    font-size: var(--font-size-root);
    font-weight: 300;
    text-align: left;
    line-height: 1.8;

    em {
        /* site.css resets em to font-style:normal site-wide; Lodha Times
        relies on italic em for emphasis throughout, not just headings. */
        font-style: italic;
    }

    p {
        max-width: 992px;
        letter-spacing: -0.01em;
        margin-top: 0;
        margin-bottom: calc(1.4 * var(--font-size-root));
        text-align: justify;
    }
    p:last-of-type {
        margin-bottom: 0;
    }
    p.has-drop-cap:first-letter {
        font-family: "Domaine Display", serif;
        font-weight: 400;
        font-size: var(--font-size-max);
        line-height: 0.75;
    }
    a {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: #c9c9c9;
        text-underline-offset: 0.5em;
        @media (max-width: 767px) {
            text-decoration-thickness: 0.5px;
        }
        @media (min-width: 768px) {
            text-decoration-thickness: 1px;
        }
    }

    /* Typography utility classes carried over per-instance in migrated
    content (e.g. on core/paragraph blocks) - only the values actually
    used across Lodha Times content are implemented here. */
    .font-family\:serif {
        font-family: "Domaine Display", serif;
    }
    .line-height\:140\% {
        line-height: 140%;
    }
    .screen-sm\:font-size\:20px {
        @media (max-width: 767px) {
            font-size: 20px;
        }
    }
    .screen-lg\:font-size\:25px {
        @media (min-width: 768px) {
            font-size: 25px;
        }
    }

    :is(h1, h2, h3, h4, h5, h6) {
        font-family: "Domaine Display", serif;
        font-weight: 400;
        margin-top: 0;
        margin-bottom: var(--span-2x);
        &:last-child {
            margin-bottom: 0;
        }
        &.has-text-align-center[style*="max-width"] {
            /*
            * WP core auto-centers width-constrained blocks (margin:auto)
            * via its "is-layout-constrained" CSS, but that only applies
            * inside native Group/Columns blocks - our custom Content
            * Column wrapper isn't one, so headings with an inline
            * max-width (baked into the migrated content) sit flush-left
            * instead of centered like lodhatimes.com. Only when the
            * heading is also explicitly centered - a max-width heading
            * without that (e.g. a left-aligned subtitle) should stay put.
            */
            margin-left: auto;
            margin-right: auto;
        }
    }
    h1 {
        line-height: 1.1;
        margin-top: 0.2em;
        margin-bottom: 0.2em;
        font-size: 30px;
        @media (min-width: 768px) {
            font-size: 40px;
        }
    }
    h2 {
        line-height: 1.4;
        font-size: 20px;
        @media (min-width: 768px) {
            font-size: 30px;
        }
    }
    h3 {
        line-height: 1.4;
        font-size: 23px;
        @media (min-width: 768px) {
            font-size: 25px;
        }
    }
    h4 {
        line-height: 1.4;
        font-size: 20px;
        @media (min-width: 768px) {
            font-size: 25px;
        }
    }
    h5 {
        line-height: 1;
        font-size: 14px;
        @media (min-width: 768px) {
            font-size: 16px;
        }
    }
    h6,
    figcaption {
        margin-top: 0;
        font-family: "FuturaBT-Book", "Trebuchet MS", "Arial", sans-serif;
        text-transform: uppercase;
        font-weight: 400;
        line-height: 1;
        font-size: 14px;
        @media (min-width: 768px) {
            font-size: 16px;
        }
    }
    figcaption.wp-element-caption {
        padding-top: 6px;
    }

    img {
        width: 100%;
        height: auto;
    }

    /* Migrated core/group blocks with a nowrap flex layout (WP core's own
    .wp-container-core-group-is-layout-* / .is-nowrap classes) squeeze their
    children into unreadable columns on mobile - force wrapping there. */
    @media (max-width: 767px) {
        .is-nowrap {
            flex-wrap: wrap;
        }
    }

    button,
    .button {
        font-family: "FuturaBT-Book", "Trebuchet MS", "Arial", sans-serif;
        font-size: calc(0.8888 * var(--font-size-root));
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        display: inline-grid;
        align-content: center;
        justify-content: center;
        min-width: 192px;
        height: 55px;
        padding: 10px;
        box-sizing: border-box;
        background: transparent;
        color: #000;
        border: 1px solid currentColor;
        cursor: pointer;
    }

    .__btnDownload,
    .__btnShare {
        border: 1px solid #c4c4c4;
        border-radius: 100px;
        width: 53px;
        height: 53px;
        display: grid;
        place-items: center;
        background-color: #fff;
        box-shadow: 0px 4px 4px 0px #00000040;
        svg {
            width: 33.333%;
            height: auto;
        }
    }
}