/* Comglasco brand helpers used by the Elementor templates.
   Add a class in Elementor > Advanced > CSS Classes to use one. */

:root {
	--cag-red: #FD0304;
	--cag-red-ink: #C80000;
	--cag-ink: #1E2022;
	--cag-ice: #F3F4F6;
}

/* 45-degree "wing" cut on the bottom-right corner (header, hero photos, member card). */
.cag-wing { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.cag-wing-lg { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); }
.cag-wing-lg img { display: block; }

/* Small wing cut on buttons: put the class on the Button widget. */
.cag-btn-wing .elementor-button { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }

/* Buttons keep a 44px touch target on phones. */
.cag-btn-wing .elementor-button,
.cag-btn .elementor-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }

/* Header menu links (Icon List widget, inline view). */
.cag-nav .elementor-icon-list-text { transition: none; }
.cag-nav a:hover .elementor-icon-list-text { text-decoration: underline; text-underline-offset: 6px; }

/* Cards that should lift a little on hover. */
.cag-card { transition: transform .15s ease; }
.cag-card:hover { transform: translateY(-2px); }

/* Embedded map and booking app. */
.cag-embed { width: 100%; }
.cag-embed__frame { display: block; width: 100%; border: 0; background: transparent; }

/* Tint simulator (homepage HTML widget). */
.cag-tint { position: relative; overflow: hidden; user-select: none; }
.cag-tint img { display: block; width: 100%; aspect-ratio: 16 / 6; object-fit: cover; }
.cag-tint__after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.cag-tint__after img { height: 100%; filter: brightness(.55) contrast(1.15); }
.cag-tint__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background: #fff; pointer-events: none; }
.cag-tint input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.cag-tint__tag { position: absolute; top: 14px; padding: 6px 10px; font: 800 12px/1 Montserrat, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.cag-tint__tag--l { left: 14px; background: #fff; color: var(--cag-ink); }
.cag-tint__tag--r { right: 14px; background: var(--cag-ink); color: #fff; }

@media (prefers-reduced-motion: reduce) { .cag-card { transition: none; } }