/*
Theme Name:   Tea
Author:       Reza
Template:     hello-elementor
Version:      1.0.0
*/

@font-face {
    font-family: "IRANYekanX VF";
    src: url("fonts/iranyekanxVF/IRANYekanXVF.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "IRANYekanX VF", sans-serif;
}

/*
 * The overlay header is position:absolute, so its containing block is the
 * initial containing block -- which WordPress's `html{margin-top}` for the
 * admin bar does not move. Logged-in users would see the admin bar cover it.
 * Elementor cannot express an offset conditional on a body class.
 */
.admin-bar .elementor-location-header > .e-con {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .elementor-location-header > .e-con {
        top: 46px;
    }
}

/*
 * CTA banner: the background photo sits on the left with a horizontal gradient
 * over it. Elementor's gradient stops, overlay colours and background image are
 * all non-responsive, so on a narrow screen the text runs over the photo and
 * loses contrast. Drop the photo on mobile; the container's solid green
 * background (#233E17) carries the text instead.
 */
@media screen and (max-width: 767px) {
    /* !important is needed: Elementor's generated selector
       (.elementor-10 .elementor-element.elementor-element-304e079:not(...))
       is more specific than anything reasonable a theme can write. */
    .landing-cta__content {
        background-image: none !important;
    }
}

/*
 * The header is absolutely positioned so it can overlay the hero on the front
 * page, which is why its menu and brand are white. Every other page has no
 * hero behind it, so that white text needs a guaranteed dark backdrop --
 * otherwise any new page built without a dark band renders an unreadable menu.
 *
 * Elementor cannot vary a container's background by body class, and a second
 * header template would mean maintaining every header change twice across all
 * sites. One rule is cheaper. !important is required because Elementor's
 * generated selector (.elementor-72 .elementor-element.elementor-element-...)
 * outranks anything a theme can reasonably write.
 */
body:not(.home) .elementor-location-header > .e-con {
    background-color: #233E17 !important;
}