/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here... */

/* Availability table: center each column's values under its heading. Desktop only — below
   768px the rows stack into labelled cards (see the Home page's Beaver Builder CSS). */
@media screen and (min-width: 768px) {
	.residences-table th,
	.residences-table td {
		text-align: center;
	}
}

/* Availability table on mobile: each unit is a card (layout from the Home page's Beaver Builder
   CSS). Show each value's label from the cell's data-label so "View" / "1 / 1" read clearly.
   "table." raises specificity over the page CSS, which loads after this file. */
@media screen and (max-width: 767px) {
	table.residences-table tr {
		box-sizing: border-box;
		padding: 0 12px;
	}
	table.residences-table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
	}
	table.residences-table td::before {
		content: attr(data-label);
		font-size: 0.85em;
		letter-spacing: 1px;
		opacity: 0.6;
		white-space: nowrap;
	}
	table.residences-table td:first-child {
		display: block;
		border-bottom: 1px solid rgba(255, 255, 255, 0.35);
		margin-bottom: 6px;
	}
	table.residences-table td:first-child::before {
		content: none;
	}
	table.residences-table tbody::after {
		content: "";
		display: table;
		clear: both;
	}
}
@media screen and (max-width: 479px) {
	table.residences-table tr {
		width: 100%;
	}
} 

/* Header (Themer layout 671): the builder gives the "Ivy Tower" heading a fixed 24% column, which
   is narrower than the text below ~1470px, so it wrapped onto 2–4 lines. Size the heading column
   to its text, give the menu column the rest, and scale the heading down as the viewport narrows.
   Node IDs come from that layout; they will change if the header row/columns are rebuilt.
   At ≤768px the builder's mobile header (hamburger) takes over, untouched. */
@media (min-width: 769px) {
	.fl-builder-content .fl-node-619d0ecf1c4a5 {
		width: auto !important;
		flex: 0 0 auto;
	}
	.fl-builder-content .fl-node-619d0ecf1c4a6 {
		width: auto !important;
		flex: 1 1 auto;
		min-width: 0;
	}
	h2.fl-node-njg7fex5kob0 {
		white-space: nowrap;
		font-size: clamp(32px, 3.5vw, 50px) !important;
	}
	.fl-node-619d0ecf1c4a8 .uabb-creative-menu .menu > li > a {
		white-space: nowrap;
	}
}
@media (min-width: 769px) and (max-width: 1200px) {
	.fl-node-619d0ecf1c4a3 > .fl-row-content-wrap {
		padding-left: 30px;
		padding-right: 30px;
	}
}
/* Tightest range just above the hamburger breakpoint: trim spacing so the menu stays on one row. */
@media (min-width: 769px) and (max-width: 991px) {
	h2.fl-node-njg7fex5kob0 {
		margin-left: 0;
		margin-right: 10px;
	}
	.fl-node-619d0ecf1c4a8 .uabb-creative-menu .menu > li {
		margin-left: 2px;
		margin-right: 2px;
	}
	.fl-node-619d0ecf1c4a8 .uabb-creative-menu.uabb-menu-default .menu > li > a {
		padding-left: 8px;
		padding-right: 8px;
	}
}

/* Contact section (Home layout 670): the form column (40% wide) has a fixed 150px left/right
   padding, which left as little as ~80px for content between 993–1395px, breaking "CONTACT US"
   mid-word and crushing the form. Scale the padding with the viewport: 40px at ~1000px, full
   150px from ~1550px up (unchanged on large screens). ≤992px keeps the builder's own padding. */
@media (min-width: 993px) {
	.fl-builder-content .fl-node-zds6i7eapnxm > .fl-col-content {
		padding-left: clamp(40px, calc(20vw - 160px), 150px);
		padding-right: clamp(40px, calc(20vw - 160px), 150px);
	}
}

/* Residences / Amenities / Hell's Kitchen headings sit in narrow side-by-side columns between
   769–992px, where the theme's 50px h2 is wider than the column ("RESIDENCES" needs ~300px in a
   ~180–265px column) and words broke mid-word. Scale them down in that range; the theme's 30px
   mobile size takes over at ≤768px. */
@media (min-width: 769px) and (max-width: 992px) {
	.fl-builder-content h2.fl-node-619d0e4d303b6,
	.fl-builder-content h2.fl-node-e6ndxbqaym8v,
	.fl-builder-content h2.fl-node-619d0e4d303be {
		font-size: clamp(28px, 3.7vw, 50px);
	}
}