/* Freixa Arquitectos — small additions on top of the vendor template CSS.
   Kept separate from style.css so template updates don't get clobbered. */

/* style.css defines .font-12 .. .font-80 as fixed px sizes with no mobile
   scaling at all (only a handful of specific selectors like h2.font-40 or
   span.font-30 get a hand-picked override at max-width:575px — see style.css
   "some responsive device font size"). Everything else using these classes
   directly (every h1 hero headline, most h2 section titles, etc.) stays at
   its desktop size on a phone, which is why some text looks oversized on
   mobile while other text (the hand-picked selectors) shrinks fine. clamp()
   fixes all of them at once and scales smoothly at any width instead of
   jumping at a breakpoint; the vw coefficient is tuned so the value reaches
   its original desktop px size at ~1200px viewport width and stops growing
   past that (matching the fixed-size design width of the template). */
.font-12 { font-size: clamp(11px, 1vw, 12px); }
.font-14 { font-size: clamp(13px, 1.17vw, 14px); }
.font-16 { font-size: clamp(15px, 1.33vw, 16px); }
.font-18 { font-size: clamp(16px, 1.5vw, 18px); }
.font-20 { font-size: clamp(17px, 1.67vw, 20px); }
.font-22 { font-size: clamp(18px, 1.83vw, 22px); }
.font-24 { font-size: clamp(19px, 2vw, 24px); }
.font-26 { font-size: clamp(20px, 2.17vw, 26px); }
.font-28 { font-size: clamp(21px, 2.33vw, 28px); }
.font-30 { font-size: clamp(22px, 2.5vw, 30px); }
.font-32 { font-size: clamp(23px, 2.67vw, 32px); }
.font-34 { font-size: clamp(24px, 2.83vw, 34px); }
.font-36 { font-size: clamp(25px, 3vw, 36px); }
.font-38 { font-size: clamp(26px, 3.17vw, 38px); }
.font-40 { font-size: clamp(27px, 3.33vw, 40px); }
.font-50 { font-size: clamp(30px, 4.17vw, 50px); }
.font-60 { font-size: clamp(34px, 5vw, 60px); }
.font-70 { font-size: clamp(36px, 5.83vw, 70px); }
.font-80 { font-size: clamp(38px, 6.67vw, 80px); }

/* style.css's own line-heights for these classes are fixed px too (e.g.
   font-70 keeps a 76px line-height at any width), which produces oddly
   loose leading once the font itself shrinks on a phone. A relative
   line-height rides along with whatever size clamp() lands on. */
.font-18, .font-20, .font-22, .font-24, .font-26, .font-28, .font-30,
.font-32, .font-34, .font-36, .font-38, .font-40, .font-50, .font-60,
.font-70, .font-80 {
	line-height: 1.2;
}

.freixa-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
}

.freixa-hero .overlay-main {
	position: absolute;
	inset: 0;
}

.freixa-hero-content {
	position: relative;
	z-index: 2;
}

@media (max-width: 767px) {
	.freixa-hero {
		min-height: 70vh;
	}
}

.freixa-page-loading {
	display: block;
}

/* The vendor style.css sets `.icon-content p { word-break: break-all; }`,
   which was presumably tuned for a wider layout — in our narrower
   icon-box grids (services, values) it chops words mid-letter. */
.icon-content p {
	word-break: normal;
}

/* Accent color, set from /admin/configuracion as a CSS custom property on
   .page-wraper (see src/app/(site)/layout.tsx). style.css hardcodes every
   primary-color class straight to #000 with no variable to hook into, so
   these overrides re-point just the classes this site actually uses —
   everything else in style.css (dark image overlays, the black contact-info
   panel, etc.) intentionally stays literal black. */
:root {
	--freixa-accent: #000000;
}

.site-text-primary,
.site-button-secondry:active,
.site-button-secondry:hover,
.site-button-secondry:focus,
.active > .site-button-secondry {
	color: var(--freixa-accent);
}

.site-bg-primary,
.site-button,
.site-button:active,
.site-button:focus,
.active > .site-button,
.site-button.black {
	background-color: var(--freixa-accent);
}

.site-button:hover {
	color: var(--freixa-accent);
}

.site-button.black:hover,
.site-button.black:active,
.site-button.black:focus {
	background-color: var(--freixa-accent);
	filter: brightness(0.85);
}

/* Header logo — style.css boxes it at 140x70px (.logo-header) with the img
   capped to max-width/max-height:100% of that box (.logo-header-inner img),
   so bumping the <img> width/height props alone has no visual effect; the
   box itself has to grow. Was 294x147 (110% bigger than the vendor default),
   scaled down 20% from that to 235x118, including the sticky-header state
   and the two responsive breakpoints it defines. */
.logo-header,
.is-fixed .logo-header {
	width: 235px;
	height: 118px;
}

@media only screen and (max-width: 991px) {
	.logo-header {
		width: 202px;
	}
}

@media only screen and (max-width: 480px) {
	.logo-header {
		width: 168px;
	}
}

/* Fixed header overlapping page content on mobile/tablet. style.css forces
   `.sticky-wrapper { height: auto !important; }` at max-width:991px (the
   placeholder Waypoint Sticky inserts around .sticky-header to reserve
   space once .main-bar goes position:fixed) — presumably written to pair
   with a mobile header that never actually goes fixed. Nothing here adds
   the `.sticky-no` class style.css defines for that, so is-fixed still
   pins .main-bar to the top while its placeholder collapses to 0, and
   every page starts with its content (the hero heading, on the homepage)
   rendered straight underneath the header instead of below it. Keeping
   the header in normal flow at that same breakpoint removes the fixed
   positioning that rule assumed, instead of fighting its !important on
   the placeholder height. */
@media only screen and (max-width: 991px) {
	.is-fixed .main-bar {
		position: static;
	}
}

/* Header bar (.main-bar, the black/white band the logo sits in) — style.css
   gives it 10px top/bottom padding (plus the .p-t10 utility class repeating
   the same 10px on top). Scaled down 20% alongside the logo above, so the
   band's overall height shrinks by roughly the same proportion instead of
   just the logo shrinking inside an unchanged band. Scoped to .main-bar
   with .p-t10 so it only hits the header bar, not other .p-t10 usages. */
.main-bar.p-t10 {
	padding: 8px 0px;
}

/* "Nuestros clientes" — logos in grayscale, full color on hover.
   Each logo sits in a fixed-height box so wildly different source
   aspect ratios (a wide banner next to a tall crest) still read as
   the same visual size instead of a ragged, disproportionate grid. */
.client-logos [class*="col-"] {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
}

.client-logos img {
	max-height: 70px;
	max-width: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0 auto;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.client-logos img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* Servicios — equal-height cards regardless of description/feature length. */
.row.align-items-stretch > [class*="col-"] {
	display: flex;
}

.row.align-items-stretch > [class*="col-"] .wt-icon-box-wraper {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Proyectos — uniform thumbnail crop so mixed photo ratios (portrait/
   landscape) don't produce a ragged masonry grid. */
.portfolio-wrap .wt-img-effect img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	height: 100%;
}

/* Dark mode (see ThemeToggle.tsx / src/app/layout.tsx). style.css has no
   theme variables to hook into, so instead of auditing 6000+ lines of
   hardcoded colors, the whole public site is flipped with filter: invert()
   — white backgrounds become black, black text becomes white, and the
   existing black accent (--freixa-accent) inverts to white right along with
   it, keeping the "negro y blanco" look in both themes. Anything that's a
   real photo (img/video/iframe and the hero/banner background-images) gets
   a second invert so it renders true-to-color instead of as a photo
   negative. Scoped to .page-wraper only, so /admin is unaffected. */
html[data-theme="dark"] .page-wraper {
	background: #fff;
	filter: invert(1) hue-rotate(180deg);
}

html[data-theme="dark"] .page-wraper img,
html[data-theme="dark"] .page-wraper video,
html[data-theme="dark"] .page-wraper iframe,
html[data-theme="dark"] .page-wraper .freixa-hero,
html[data-theme="dark"] .page-wraper .wt-bnr-inr {
	filter: invert(1) hue-rotate(180deg);
}

/* filter (any value but none) makes an element the containing block for its
   position:fixed descendants, same as transform does — so now that
   .page-wraper has filter:invert(), the mobile nav (.nav-sidebar) and the
   search overlay (#search), both `position:fixed; height:100%`, resolve
   that 100% against .page-wraper's own (page-content-tall) height instead
   of the viewport. That silently stretches them to the full page height,
   pushing their actual content thousands of pixels down, off-screen. `vh`
   stays viewport-relative no matter the containing block, so it sidesteps
   the issue entirely. */
html[data-theme="dark"] .page-wraper .nav-sidebar,
html[data-theme="dark"] .page-wraper #search {
	height: 100vh;
}

/* Site logo (header + footer) — it's a single flattened image (dark wordmark
   + orange mark) on a transparent background, with no light-on-dark variant
   to swap in. Counter-inverting it like other photos keeps the true brand
   colors, but the dark wordmark then disappears against the now-black
   header/footer behind it. A white plate behind the transparent logo keeps
   it legible without touching the logo file itself.

   Getting the plate itself to actually read as white takes care: it lives
   inside .page-wraper, which is already under filter:invert(). A plain
   `background: #fff` there gets caught by that same invert and renders
   black, right back to the original problem. So instead the whole
   container is counter-inverted (one invert cancels the ancestor's), which
   flips its authored white background back to white — but that leaves the
   img doubly counter-inverted (its own rule below, plus the container's),
   landing back on inverted colors, so the img's own filter is reset to
   none and lets the container's single counter-invert do all the work. */
html[data-theme="dark"] .page-wraper .logo-header-inner,
html[data-theme="dark"] .page-wraper .wt-footer-bot-left {
	background: #fff;
	border-radius: 8px;
	padding: 8px 16px;
	filter: invert(1) hue-rotate(180deg);
}

html[data-theme="dark"] .page-wraper .logo-header-inner img,
html[data-theme="dark"] .page-wraper .wt-footer-bot-left img {
	filter: none;
}

/* .client-logos img already carries its own filter (grayscale, full color
   on hover) — the generic dark-mode rule above would win on specificity and
   clobber it, so it's re-applied here layered with the dark-mode invert. */
html[data-theme="dark"] .page-wraper .client-logos img {
	filter: invert(1) hue-rotate(180deg) grayscale(1);
}

html[data-theme="dark"] .page-wraper .client-logos img:hover {
	filter: invert(1) hue-rotate(180deg) grayscale(0);
}

.theme-toggle-btn {
	cursor: pointer;
}

/* .main-bar has a lot of unused width between the logo (float:left) and the
   nav icons (float:right, .nav-wide .container is full-width) on wide
   screens, which reads as an empty gap. A thin static line fills it —
   purely decorative (aria-hidden, no interaction), echoing the underline on
   .btn-half's <em> without its hover animation. Authored as a dark, subtle
   line like the rest of style.css; the global dark-mode filter:invert() on
   .page-wraper (see above) turns it light automatically, no extra rule
   needed. Hidden below 1200px, where the logo/nav icons are close enough
   together that there's no real gap left to fill. */
.freixa-header-line {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 1px;
	background: rgba(0, 0, 0, 0.25);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

@media only screen and (min-width: 1200px) {
	.freixa-header-line {
		display: block;
	}
}