/* 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. 110% bigger than the vendor default (50% then a
   further 40% on top), including the sticky-header state and the two
   responsive breakpoints it defines. */
.logo-header,
.is-fixed .logo-header {
	width: 294px;
	height: 147px;
}

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

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

/* "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;
}