/*
Theme Name: Agraria Child
Theme URI: https://agraria.qodeinteractive.com
Description: A child theme of Agraria
Author: Edge Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: agraria
Template: agraria
*/

.qodef-h2, h2 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: #51B500!important;
    font-size: 60px;
    line-height: 1em;
    margin: 25px 0;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.qodef-button.qodef-layout--filled.qodef-html--link {
    color: #fff;
    background-color: #51B500;
    border: 1px solid transparent;
}
.qodef-icon-with-text.qodef-layout--top.qodef--retina img {
    max-width: 100%!important;
}

/* Contact form ------------------------------------------------------------ */
/* Markup lives in the Contact Form 7 form editor. Everything below is anchored
   on .bfruit-form__row rather than an outer wrapper, because a wrapper around
   the whole form is easily lost when the markup is pasted into the CF7 editor
   and its absence would silently disable this entire block. */

/* The .wpcf7-form prefix is load-bearing: the Qi Addons CF7 widget ships
   ".qodef-qi-contact-form-7 form div { margin: 0 }", which outweighs a bare
   .bfruit-form__row and collapses the gaps between fields. */
.wpcf7-form .bfruit-form__row {
    margin: 0 0 14px;
}

.wpcf7-form .bfruit-form__row:last-child {
    margin-bottom: 0;
}

/* Telefone + Empresa share a line, stacking once there is no room. */
.bfruit-form__row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 680px) {
    .bfruit-form__row--split {
        grid-template-columns: 1fr;
    }
}

/* CF7 wraps each field in this span and gives it a 20px bottom margin, which
   would stack on top of the row spacing above. */
.bfruit-form__row .wpcf7-form-control-wrap {
    display: block;
    margin: 0;
}

/* The theme styles these at .qodef-contact-form-7 input[type=...], so the
   .wpcf7-form prefix is here to win the specificity outright rather than
   relying on stylesheet order. */
.wpcf7-form .bfruit-form__row input[type="text"],
.wpcf7-form .bfruit-form__row input[type="email"],
.wpcf7-form .bfruit-form__row input[type="tel"],
.wpcf7-form .bfruit-form__row textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 18px;
    background-color: #fff;
    /* The design puts white fields on a cream section, where they read without
       a border. This section is white, so they need a visible edge. */
    border: 1px solid #e2e2e2;
    border-radius: 0;
    color: #3c3c3c;
    font-size: 15px;
    line-height: 1.6;
    transition: border-color 0.3s ease-out;
}

.wpcf7-form .bfruit-form__row input[type="text"]:focus,
.wpcf7-form .bfruit-form__row input[type="email"]:focus,
.wpcf7-form .bfruit-form__row input[type="tel"]:focus,
.wpcf7-form .bfruit-form__row textarea:focus {
    border-color: #51B500;
    outline: none;
}

.bfruit-form__row ::placeholder {
    color: #6b6b6b;
    opacity: 1;
}

/* CF7 emits rows="10" on the textarea, which is far taller than the design. */
.wpcf7-form .bfruit-form__row textarea {
    height: 145px;
    resize: vertical;
}

/* Consent checkbox: CF7 renders input + label text inside a <label>. */
.bfruit-form__row .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.bfruit-form__row .wpcf7-acceptance label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 15px;
    cursor: pointer;
}

.wpcf7-form .bfruit-form__row .wpcf7-acceptance input[type="checkbox"] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 1px solid #d8d4c6;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.wpcf7-form .bfruit-form__row .wpcf7-acceptance input[type="checkbox"]:checked {
    background-color: #51B500;
    border-color: #51B500;
}

.wpcf7-form .bfruit-form__row .wpcf7-acceptance input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    margin: 3px auto 0;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.bfruit-form__row .wpcf7-acceptance a {
    color: inherit;
    text-decoration: underline;
}

/* agraria-core already turns [submit] into a qodef button with the arrow icon,
   so only the colour is needed here. */
.bfruit-form__row .wpcf7-submit.qodef-button.qodef-layout--filled,
.bfruit-form__row .wpcf7-submit.qodef-button.qodef-layout--filled:hover,
.bfruit-form__row .wpcf7-submit.qodef-button.qodef-layout--filled:focus {
    background-color: #51B500;
    border-color: #51B500;
    color: #fff;
}

/* Validation feedback */
.wpcf7-form .bfruit-form__row .wpcf7-not-valid {
    border-color: #d33;
}

.bfruit-form__row .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 13px;
    color: #d33;
}

.bfruit-form__row .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 12px 16px;
    font-size: 14px;
}

/* Back to top ------------------------------------------------------------- */

/* agraria-core paints this with var(--qode-main-color). Overriding just this
   button rather than the variable, which is used site-wide. */
#qodef-back-to-top .qodef-back-to-top-icon {
    background-color: #51B500;
    border-color: #51B500;
}

/* Footer ------------------------------------------------------------------ */

/* Each contact line is its own widget, and the theme puts 35px under every one
   of them, which stacks on top of the spacing the blocks already carry. Drop it
   and let the blocks control their own rhythm. */
#qodef-page-footer .widget:not(.widget_agraria_core_title_widget) {
    margin: 0 0 0px;
    color: #b9c0b5;
}

/* The newsletter submit is a <button>, not a link, so it misses the
   .qodef-html--link rule above that carries the brand green. */
#qodef-footer-newsletter .wpcf7-submit.qodef-button.qodef-layout--filled,
#qodef-footer-newsletter .wpcf7-submit.qodef-button.qodef-layout--filled:hover,
#qodef-footer-newsletter .wpcf7-submit.qodef-button.qodef-layout--filled:focus {
    background-color: #51B500;
    border-color: #51B500;
    color: #fff;
}

/* Newsletter consent, under the email field. Same checkbox as the contact
   form, recoloured for the dark band. */
#qodef-footer-newsletter .bfruit-newsletter-consent {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #b9c0b5;
}

#qodef-footer-newsletter .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

#qodef-footer-newsletter .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

#qodef-footer-newsletter .wpcf7-acceptance input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    padding: 0;
    background-color: transparent;
    border: 1px solid #b9c0b5;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

#qodef-footer-newsletter .wpcf7-acceptance input[type="checkbox"]:checked {
    background-color: #51B500;
    border-color: #51B500;
}

#qodef-footer-newsletter .wpcf7-acceptance input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 5px;
    height: 9px;
    margin: 2px auto 0;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#qodef-footer-newsletter .wpcf7-acceptance a {
    color: #fff;
    text-decoration: underline;
}

/* The footer logo is the same inline SVG the header uses, so it carries the
   header's fixed 130x61 size. Let it scale to its wrapper instead. */
.bfruit-footer-logo svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Columns 2 and 3 hold the two contact addresses. The company-name line wraps
   to two lines in one column and one in the other, which would push everything
   below it out of step, so reserve two lines in both. */
#qodef-page-footer-top-area .widget_agraria_core_title_widget + .widget_block > div {
    min-height: 56px;
}

/* The Qi button block stores its typography as block attributes, which only
   generate CSS when the block is saved from the editor. These footer buttons
   are registered programmatically, so the styling is declared here. */
#qodef-page-footer-top-area .qi-block-button.qodef-layout--textual .qodef-m-text {
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;
    letter-spacing: 0.5px;
}

/* Bottom bar: "redes sociais" sits on the same line as the icons. */
#qodef-page-footer-bottom-area .widget_agraria_core_social_icons_group {
    display: flex;
    align-items: center;
}

#qodef-page-footer-bottom-area .widget_agraria_core_social_icons_group .qodef-widget-title {
    margin: 0 18px 0 0;
}

/* ==========================================================================
   Bfruit – Responsive fixes · tablet (≤1024px) + mobile (≤767px)
   Site: https://wp.webcomum.org/bfruit/   (Agraria theme + Elementor)
   Append to the END of wp-content/themes/agraria-child/style.css
   (or Appearance › Customize › Additional CSS).
   Breakpoints match Elementor defaults: tablet ≤1024, mobile ≤767.
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL – all pages
   ========================================================================== */

@media (max-width: 1024px) {

	/* No horizontal scroll (clip ≠ hidden → sticky header keeps working) */
	html,
	body {
		overflow-x: clip;
	}

	/* Heading scale – child theme forces h2 60px at every width */
	h1, .qodef-h1 { font-size: 56px; }
	h2, .qodef-h2 { font-size: 48px; }
	h3, .qodef-h3 { font-size: 40px; }
	h4, .qodef-h4 { font-size: 32px; }

	/* Elementor "custom width" widgets set to >100% overflow their column
	   (section titles on Quem somos / Serviços / Home, banners, images) */
	.elementor-widget-wrap > .elementor-element.elementor-widget__width-initial,
	.e-con > .elementor-element.elementor-widget__width-initial,
	.e-con-inner > .elementor-element.elementor-widget__width-initial {
		max-width: 100% !important;
	}

	/* Single images use an Elementor scale(1.1–1.2) transform → overflow */
	.elementor-widget-agraria_core_single_image.e-transform > .elementor-widget-container {
		transform: none !important;
	}

	/* Page title banner: height follows the image ratio (up to ~690px) */
	.qodef-page-title.qodef--has-image,
	.qodef-page-title.qodef--has-image .qodef-m-inner {
		height: 420px !important;
		overflow: hidden;
	}
	.qodef-page-title.qodef--has-image .qodef-m-image img {
		width: 100%;
		height: 100% !important;
		object-fit: cover;
	}
	/* Counters (Quem somos: "2519840Kg" / "68Produtores" overflow at 80px;
	   3rd column is only ~155px wide on tablet). The widget prints its size
	   inline, hence !important; the ≤767px size is in the block below. */
	.qodef-counter .qodef-m-digit {
		font-size: 5.5vw !important;
	}

	/* Mobile-header menu button: 32×20 tap area → ≥44px */
	.qodef-mobile-header-opener {
		padding: 12px 6px;
	}

	/* White title on light photos (e.g. Produtores) */
	.qodef-page-title.qodef--has-image .qodef-m-title {
		text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
	}
}

@media (max-width: 767px) {

	/* Counters stack one per row here, so they can be larger again */
	.qodef-counter .qodef-m-digit {
		font-size: min(80px, 16vw) !important;
	}

	/* Heading scale */
	h1, .qodef-h1 { font-size: 42px; }
	h2, .qodef-h2 { font-size: 38px; }
	h3, .qodef-h3 { font-size: 30px; }
	h4, .qodef-h4 { font-size: 26px; }
	h5, .qodef-h5 { font-size: 24px; }

	/* Page title banner */
	.qodef-page-title.qodef--has-image,
	.qodef-page-title.qodef--has-image .qodef-m-inner {
		height: 260px !important;
	}

	/* Section titles inside Elementor were 45–60px
	   (h1–h3 only: h6 titles, e.g. Contactos office names, stay small) */
	.qodef-section-title h1.qodef-m-title,
	.qodef-section-title h2.qodef-m-title {
		font-size: 38px;
		line-height: 1.05;
	}
	.qodef-section-title h3.qodef-m-title {
		font-size: 30px;
		line-height: 1.05;
	}

	/* FAQ accordion titles */
	.qodef-accordion .qodef-accordion-title .qodef-tab-title,
	.qodef-accordion .qodef-e-title {
		font-size: 18px;
		line-height: 1.4;
	}

	/* Touch targets ≥44px */
	.wpcf7 input[type="checkbox"] {
		width: 22px;
		height: 22px;
	}
}


/* Mobile menu close "X" was forced white (invisible on the white menu
   panel) → same dark green as the hamburger icon */
.qodef-mobile-header-opener .qodef-m-icon.qodef--close svg {
	color: #162e09;
	stroke: #162e09;
}


/* ==========================================================================
   2. HOMEPAGE (page-id-4401)
   ========================================================================== */

@media (max-width: 1024px) {

	/* Hero (Slider Revolution) – title + description overlapped.
	   Layers: -0 = title, -5 = description, -2 = "Ver mais" button */
	#SR7_3_1 sr7-txt.sr7-layer[id$="-0"],
	#SR7_3_1 sr7-txt.sr7-layer[id$="-5"] {
		left: 7% !important;
		width: 86% !important;
		text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
	}
	#SR7_3_1 sr7-txt.sr7-layer[id$="-0"] {
		top: 120px !important;
		font-size: 52px !important;
		line-height: 1.1 !important;
	}
	#SR7_3_1 sr7-txt.sr7-layer[id$="-5"] {
		top: 210px !important;
		font-size: 22px !important;
		line-height: 1.45 !important;
	}
	/* Button layer full-width + centred (was offset up to 75px right) */
	#SR7_3_1 sr7-txt.sr7-layer[id$="-2"] {
		top: 380px !important;
		left: 0 !important;
		width: 100% !important;
		text-align: center !important;
	}

	/* Banner section was pulled up 200px over the image collage */
	.elementor-4401 .elementor-element.elementor-element-33a4aee {
		margin-top: 0 !important;
		padding-top: 30px;
	}

	/* "Da produção à comercialização" – centre the icon row */
	.elementor-4401 .elementor-element-ed67dcf > img,
	.elementor-4401 .elementor-element-ed67dcf > .elementor-element-fbaf4d7,
	.elementor-4401 .elementor-element-ed67dcf > .elementor-element-0a6a21d {
		justify-self: center;
		align-self: center;
	}
	.elementor-4401 .elementor-element-0a6a21d {
		justify-content: center;
	}
	.elementor-4401 .elementor-element-ed67dcf img {
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	}
	.elementor-4401 .elementor-element-c503563 .qodef-m-title {
		font-size: 56px;
		line-height: 1;
	}
}

@media (max-width: 767px) {

	/* Hero */
	#SR7_3_1 sr7-txt.sr7-layer[id$="-0"] {
		top: 110px !important;
		font-size: 34px !important;
	}
	#SR7_3_1 sr7-txt.sr7-layer[id$="-5"] {
		top: 200px !important;
		font-size: 18px !important;
	}
	#SR7_3_1 sr7-txt.sr7-layer[id$="-2"] {
		top: 430px !important;
	}

	/* Section vertical rhythm (desktop paddings 124/130px) */
	.elementor-4401 .elementor-element.elementor-element-857f55e,
	.elementor-4401 .elementor-element.elementor-element-f32deff {
		padding-top: 60px !important;
	}

	.elementor-4401 .elementor-element-c503563 .qodef-m-title {
		font-size: 38px;
	}
	.elementor-4401 .elementor-element-3ac2959 .qodef-m-title,
	.elementor-4401 .elementor-element-b2a5fcc .qodef-m-title {
		font-size: 32px;
	}
	.elementor-4401 .elementor-element-95a9ac9 {
		margin-top: 16px;
	}

	/* "Conheça a Bfruit" image collage – 2nd image was absolutely
	   positioned on top of the others; stack the three images */
	.elementor-4401 .elementor-element.elementor-element-07790da {
		position: relative !important;
		left: 0 !important;
		right: auto !important;
	}
	.elementor-4401 .elementor-element-b97a8a5 .elementor-column > .elementor-widget-wrap,
	.elementor-4401 .elementor-element-33a4aee .elementor-column > .elementor-widget-wrap {
		margin: 0 !important;
		padding: 0 !important;
	}
	.elementor-4401 .elementor-element-c5a5e86,
	.elementor-4401 .elementor-element-07790da,
	.elementor-4401 .elementor-element-7890a0c,
	.elementor-4401 .elementor-element-3ac2959,
	.elementor-4401 .elementor-element-b2a5fcc {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 16px !important;
	}
	.elementor-4401 .elementor-element-b97a8a5 .qodef-m-image img {
		width: 100%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	/* "Bfruit o seu melhor aliado" – image spacer + equal-width buttons */
	.elementor-4401 .elementor-element-765cb45 .elementor-spacer-inner {
		height: 320px !important;
	}
	.elementor-4401 .elementor-widget-wrap > .elementor-element.elementor-element-5e09e61,
	.elementor-4401 .elementor-widget-wrap > .elementor-element.elementor-element-fdbbb45 {
		width: 100% !important;
	}
	.elementor-4401 .elementor-element-5e09e61 .elementor-widget-container,
	.elementor-4401 .elementor-element-fdbbb45 .elementor-widget-container,
	.elementor-4401 .elementor-element-5e09e61 a,
	.elementor-4401 .elementor-element-fdbbb45 a {
		width: 100%;
		justify-content: center;
		white-space: nowrap;
	}
	.elementor-4401 .elementor-element-fdbbb45 {
		margin-top: 12px;
	}

	/* "Da produção à comercialização" – desktop grid = icons row + texts
	   row; in 1 column icons got separated from their texts.
	   Re-order into icon → text pairs. */
	.elementor-4401 .elementor-element-ed67dcf {
		row-gap: 12px !important;
	}
	.elementor-4401 .elementor-element-ed67dcf > img                         { order: 1; }
	.elementor-4401 .elementor-element-ed67dcf > .elementor-element-7c066d6 { order: 2; }
	.elementor-4401 .elementor-element-ed67dcf > .elementor-element-fbaf4d7 { order: 3; }
	.elementor-4401 .elementor-element-ed67dcf > .elementor-element-0dfaf0b { order: 4; }
	.elementor-4401 .elementor-element-ed67dcf > .elementor-element-0a6a21d { order: 5; }
	.elementor-4401 .elementor-element-ed67dcf > .elementor-element-1b6de4c { order: 6; }

	.elementor-4401 .elementor-element-ed67dcf > img,
	.elementor-4401 .elementor-element-0a6a21d img {
		width: 88px !important;
		height: auto !important;
	}
	.elementor-4401 .elementor-element-fbaf4d7 .elementor-icon {
		font-size: 80px !important;
	}
	.elementor-4401 .elementor-element-fbaf4d7 .elementor-icon svg {
		width: 80px;
		height: 80px;
	}
	.elementor-4401 .elementor-element-fbaf4d7 .elementor-icon-wrapper {
		line-height: 0;
	}
	.elementor-4401 .elementor-element-7c066d6,
	.elementor-4401 .elementor-element-0dfaf0b,
	.elementor-4401 .elementor-element-1b6de4c {
		margin-bottom: 28px !important;
		transform: none !important;
	}
}


/* ==========================================================================
   3. PAGE-SPECIFIC
   ========================================================================== */

/* --- Produtos (11895) + Serviços (11947): alternating rows keep
       right-aligned text when stacked; product form box padding 78px --- */
@media (max-width: 767px) {
	.page-id-11895 .elementor-widget-text-editor,
	.page-id-11895 .qodef-section-title,
	.page-id-11947 .elementor-widget-text-editor,
	.page-id-11947 .qodef-section-title {
		text-align: left !important;
	}
	.page-id-11895 .elementor-element.elementor-element-2fe8ac2 {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.page-id-11895 .elementor-element-98dd482 .elementor-heading-title {
		font-size: 34px;
		word-break: normal;
		hyphens: auto;
	}
}

/* --- Membros (12601): LOGIN / NOVO PRODUTOR buttons use fixed left
       margins (100px / 59px) → 2nd button cut off on mobile --- */
@media (max-width: 767px) {
	.page-id-12601 .elementor-element-ae21bf5 {
		justify-content: center;
		gap: 24px;
	}
	.page-id-12601 .elementor-element-ae21bf5 > .e-button-base {
		margin-left: 0 !important;
	}
}

/* --- FAQ (4747): header is transparent + page title has no image, so the
       white menu icon and white H1 sit on white. Fallback background only –
       hidden once a page-title image is set; safe to keep or delete. */
.page-id-4747 .qodef-page-title {
	background-color: #1e2d14;
}