/**
 * Ravenna Homes — corrections to Avada's own layout CSS.
 *
 * One rule per problem, each with the Avada rule it answers written out, so
 * the next person can check whether Avada has changed it and delete ours.
 */

/**
 * THE GAP ABOVE THE FOOTER ON PHONES
 *
 * Avada's stylesheet carries:
 *
 *   @media only screen and (max-device-width: 640px) {
 *       #content { margin-bottom: 50px; }
 *   }
 *
 * Note max-DEVICE-width. It keys off the physical screen, not the window, so
 * it fires on a real phone and never in a desktop browser however narrow the
 * window is dragged. That is why the gap it creates between the last section
 * and the footer is invisible during desktop testing and obvious on an iPhone
 * — it has to be reproduced with device emulation, not just a resize.
 *
 * Measured on /rhcommunity/bridgeland-60/ at 390x844: the Plan Your Visit
 * container ends at 16088 and the footer starts at 16138. That 50px was the
 * whole remaining gap once the container's own padding had been brought down
 * in the builder.
 *
 * Every section on this site sets its own bottom padding, so the extra 50px
 * is spacing nobody asked for. Removing it leaves ~40px above the footer on a
 * phone — 20px of Avada's default column bottom margin plus 20px of container
 * padding — which is a deliberate band rather than a gap.
 *
 * Scope: site-wide, on phones only, because the Avada rule is site-wide. To
 * limit it to community pages instead, prefix with .single-rhcommunity.
 *
 * `body` is here to win on specificity, not for its own sake: this stylesheet
 * is enqueued before Avada's, so an identical `#content` selector would lose
 * on source order. (1,0,1) beats (1,0,0) regardless of order, and avoids an
 * !important that would be harder to override later.
 */
@media only screen and (max-device-width: 640px) {

	body #content {
		margin-bottom: 0;
	}
}

/**
 * THE PROMO BAR'S VERTICAL SPACING ON PHONES
 *
 * Contract: the CSS Class "rh-promo-text" on the promo bar's Text element in
 * the Header template.
 *
 * Above 640 the bar lays the text and the button out in one row and stands
 * 65px tall. Below 640 they stack, and the stacked version was 122px with one
 * line of text and 179px at 375, where the sentence wraps to three — 22% of a
 * 375x812 screen gone before the header has even started.
 *
 * Measured at 375 before this rule:
 *
 *   18px   the <p>'s own top margin
 *   86px   three lines at 18px/1.6
 *   18px   the <p>'s own bottom margin
 *   37px   the button
 *   20px   the column's bottom padding   (fixed in the builder: now 8px)
 *   ----
 *   179px
 *
 * Two of those five are the paragraph's own margin and line-height, and the
 * builder has no field for either: Avada's Text element exposes a margin on
 * its wrapping DIV, not on the <p> inside it, and its Line Height is a single
 * value with no per-device state, so touching it would shorten the desktop bar
 * too.
 *
 * The DIV margin is worth a warning. Setting it negative looks like it works —
 * the bar did drop from 179 to 107 — but the margin collapses out of the
 * container and takes the text with it: measured, the text's first line sat
 * 9px ABOVE the gold background and the button overlapped it by 8. That route
 * was tried and reverted; it is not a near miss to retry.
 *
 * Scoped to the class so it cannot reach another text block, and to 640 so the
 * one-row desktop bar is untouched.
 */
@media only screen and (max-width: 640px) {

	.rh-promo-text p {
		margin-top: 8px;
		margin-bottom: 8px;
		line-height: 1.3;
	}
}

/**
 * THE SCHEDULE A TOUR LABEL WRAPPING IN THE HEADER
 *
 * Contract: the CSS Class "rh-tour-button" on the header's full Schedule a
 * Tour button.
 *
 * Between 641 and 1200 the label broke onto two lines and the button grew from
 * 39px tall to 58px. It is a flex sizing loop, not a lack of room:
 *
 *   column (auto width)      209px   <- sizes to fit its content
 *     wrapper                193px   <- 4px left + 12px right margin
 *       button               193px   <- fills the wrapper
 *       button needs         197px   <- icon 15 + 11 margin + label 158 + 24 padding
 *
 * The column is `auto`, so it sizes to the content's shrink-to-fit width. With
 * the label free to wrap, that calculation uses the label's MIN-content width
 * ("Schedule a" / "Tour") rather than its max-content width, so the column
 * settles 4px below what one line needs and the label duly wraps. The column
 * has the room — it is 209px wide — it just never asks for it.
 *
 * Measured both ways on the live page: forcing the button to max-content, or
 * setting the label to nowrap, both produce a 197px button on one line, 38px
 * tall, with the column unchanged at 209px and no horizontal overflow.
 *
 * nowrap is the fix because it corrects the input to the sizing calculation
 * rather than padding around the result. The builder has no white-space field.
 *
 * NOT fixed by shrinking the button. Font 16→15 and padding 15→12 were tried
 * first: the button went 209→193 and the label still wrapped, because the loop
 * rescales with it. Those changes were reverted.
 *
 * The icon-only button at ≤640 has no label and is unaffected.
 */
.rh-tour-button .fusion-button-text {
	white-space: nowrap;
}

/**
 * THE COMMUNITY CARD BUTTONS WRAPPING ON PHONES
 *
 * Contract: the CSS Class "rh-card-actions" on the inner column that holds the
 * two buttons in the "Find Home – Community Card" post card design (post 1732).
 *
 * The same flex sizing loop as the Schedule a Tour button above, so read that
 * comment first — but NOT the same cause as it first appeared. The two buttons
 * are not fighting each other for one row. The column is content_wrap: wrap and
 * at phone widths they are already on separate lines; each one then wraps its
 * own label even with a whole line to itself. Measured at 375:
 *
 *   column            239px
 *     Visit Community  168px button, label on 2 lines, 80px tall
 *     View Homes       146px button, label on 2 lines, 80px tall
 *
 * Each button is `0 1 auto` inside the column, so it sizes to shrink-to-fit,
 * and with the label free to wrap that calculation uses the label's MIN-content
 * width. "Visit Community" measures 194px on one line and the button settles at
 * 168. The room is there — the button never asks for it.
 *
 * With nowrap, measured on the live page: both labels on one line, buttons 226
 * and 169 wide, 56px tall instead of 80, and no horizontal overflow. That is
 * 24px of height back on every card, times seven cards on /communities/.
 *
 * NOT fixed by any builder field, and two were measured before reaching for CSS:
 *
 *   content_layout row → column   The option that looked obvious and does
 *                                 nothing: they already stack at this width.
 *                                 It would only have cost the desktop row.
 *   stretch_small                 Full-width buttons come out 186px because the
 *                                 button's own 20px margins eat 40 of the 226.
 *                                 "Visit Community" still wrapped. Taking the
 *                                 margin to 0 as well leaves 196px for a 194px
 *                                 label — 2px of slack, and it closes up the
 *                                 vertical gap between the two buttons.
 *
 * Shortening the labels was tried earlier in the builder and measured as still
 * wrapping; that is why these read "Visit Community" / "View Homes" rather than
 * anything shorter.
 *
 * Scoped to 640 because the wrap stops well before it. Measured one line at
 * every card width from 640 to 1440, and the only widths that wrap are 414 and
 * below. Scoped to the class so it cannot reach the inventory cards, which use
 * a different card design and were measured as fine.
 *
 * Holds down to 320: at that width the button is still 226px on one line and
 * the text clears the button's padding by 1px. The labels are fixed strings in
 * the card design, not post titles, so that margin does not move. If either
 * label is ever lengthened, re-measure at 320 before trusting this.
 */
@media only screen and (max-width: 640px) {

	.rh-card-actions .fusion-button-text {
		white-space: nowrap;
	}
}