/**
 * The smallest possible layer over the template.
 *
 * Everything that makes the section look the way it does comes from Farmi's
 * own stylesheets, loaded in Farmi's own order. This file only deals with the
 * two things a WordPress page does differently from a standalone HTML file.
 */

/* 1. The theme wraps page content in a container. The template's bands are
      drawn edge to edge (its dark strip and card ground are 3000px wide), so
      the section has to break back out to the viewport. */
.sui-farmi {
  margin-inline: calc(50% - 50vw);
  overflow-x: clip;
}

/* 2. Urdu is not part of the template; it is part of this brand. */
.sui-farmi .sui-farmi-urdu {
  font-family: "Noto Nastaliq Urdu", serif;
  line-height: 2.1;
  margin-top: 14px;
}

/* .wow starts hidden and the template's script reveals it. farmi.js does the
   same; if it never runs, nothing should stay invisible. */
@media (prefers-reduced-motion: reduce) {
  .sui-farmi .wow { visibility: visible !important; animation: none !important; }
}



/**
 * The dark strip follows the photograph; the phone block follows the copy.
 *
 * In the template both come from one element — the strip is .call::after —
 * so the strip can only start where the copy ends. The brand wants the
 * photograph dipping a fixed 72px into the strip on every page, whatever the
 * copy length. So the strip is painted from the column instead, on a line
 * farmi.js sets from the photograph's bottom edge, and the call block stays
 * in flow beneath the copy — pushed down onto the strip when the copy is
 * short, left where it is when the copy is long. The template's own strip
 * is switched off so there is only one.
 */
@media (min-width: 992px) {
  .sui-farmi .about-area .info { position: relative; justify-content: flex-start; }
  .sui-farmi .about-area .info[data-strip] .call::after { display: none; }
  .sui-farmi .about-area .info[data-strip]::after {
    content: ""; position: absolute; right: 0; width: 3000px; height: 350px;
    top: var(--sui-strip-top, auto); background: var(--bg-dark); z-index: -1;
  }
  .sui-farmi .about-area .info[data-strip] .call { position: relative; margin-top: var(--sui-call-gap, 30px); }
}

/**
 * A button that sits on the dark strip cannot hover to the strip's colour.
 *
 * The template's .btn-theme hover slides a --bg-dark fill under white text.
 * In the template the button never stands on the strip, so that reads fine.
 * With the photograph dipping into the strip the button does stand on it,
 * and on hover it vanishes into the same #404a3d. Only in that state — the
 * column carries data-strip — the hover is inverted: white fill, dark text.
 */
@media (min-width: 992px) {
  .sui-farmi .about-area .info[data-strip] .content .btn.btn-theme:hover::after { background-color: var(--white); }
  .sui-farmi .about-area .info[data-strip] .content .btn.btn-theme:hover { color: var(--color-heading); }
}

/* The hidden attribute must win over the template's own display rules. */
.sui-farmi .offer-product-area .bottom[hidden],
.sui-farmi .offer-product-area .counter-class[hidden] { display: none !important; }

/**
 * Banner sizing for real headlines.
 *
 * The template's banner has no height of its own — it is 120px of padding
 * around the caption — and its 100px headline is written for two-word demo
 * lines ("Organic Autumn"). A real headline of six to eight words at 100px
 * wraps to four lines and the photograph is barely seen. So on desktop the
 * headline comes down to a size that holds a sentence in two lines, and the
 * slide is given a minimum height so the photograph carries the screen.
 */
@media (min-width: 992px) {
  .sui-farmi .banner-area .carousel-item { min-height: 78vh; display: flex; align-items: center; }
  .sui-farmi .banner-area .carousel-item > .box-table { width: 100%; }
  .sui-farmi .banner-area .large-text h2 { font-size: 64px; line-height: 1.08; }
}

/**
 * Banner, three consequences of real content on the template's demo layout.
 *
 * 1. The dark shade is .box-cell.shadow.dark::after, sized to .box-cell. With
 *    the slide given a minimum height the cell no longer fills it, so the
 *    photograph showed unshaded above and below the caption. The table and
 *    cell now stretch to the slide, and the caption is centred inside them.
 * 2. An Urdu line is a right-to-left block; left in flow it hugs the right
 *    edge of the caption. It reads under the English, so it aligns with it.
 * 3. `text-transform: capitalize` on the headline is written for the demo's
 *    two-word titles; a sentence set that way reads "Pure And Natural Food,
 *    Brought To Your Table." The author's own case stands.
 */
@media (min-width: 992px) {
  /* The template's `.banner-area div { height: auto }` defeats any attempt to
     stretch the cell to the slide, so the shade moves to the slide itself and
     the cell's own shade is switched off — one shade, full height. */
  .sui-farmi .banner-area .carousel-item { position: relative; }
  .sui-farmi .banner-area .carousel-item::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 0; }
  .sui-farmi .banner-area .carousel-item > .box-table { position: relative; z-index: 1; }
  .sui-farmi .banner-area .carousel-item .box-cell.shadow.dark::after { display: none; }
}
.sui-farmi .banner-area .content .sui-farmi-urdu { text-align: left; margin: 14px 0 22px; }
.sui-farmi .banner-area .large-text h2 { text-transform: none; }

/**
 * Brand green.
 *
 * Farmi's dark band is a grey-olive (#404a3d). Atif pointed at Ogenix's deep
 * green instead; its own variable is --ogenix-black: #2a491d. Farmi drives
 * every dark surface — the about strip, the timeline band, the deal's dark
 * button — from one variable, so one override recolours them all. Farmi's
 * :root variables were mapped onto .sui-farmi when the bundle was scoped, so
 * this later rule on the same selector wins.
 */
.sui-farmi { --bg-dark: #2a491d; }

/**
 * Product grid: WooCommerce's price HTML wraps a sale price in <ins>, which
 * browsers underline by default. The template's own markup used a bare
 * <del> + text, so it never needed this rule.
 */
.sui-farmi .our-product-area .item .price ins { text-decoration: none; }