/* =========================================================
   SHIPPING CONTAINERS JA — DESIGN SYSTEM
   ---------------------------------------------------------
   Industrial / utilitarian aesthetic.
   All design tokens live here as CSS variables so
   Elementor widgets and theme.json can reference them.
   ========================================================= */

:root {
	/* ---- Lucalza Caribbean brand palette ----
	   Navy primary, gold accent (drop), red highlight (CARIBBEAN Ltd),
	   plus working neutrals for industrial UI. */
	--scja-navy:          #023979;   /* Lucalza primary navy */
	--scja-navy-deep:     #001F4D;   /* Pressed / hover navy */
	--scja-navy-light:    #02468F;   /* Lighter navy for highlights */
	--scja-gold:          #EEBB00;   /* Lucalza gold (oil drop) */
	--scja-gold-deep:     #C99617;   /* Pressed gold */
	--scja-orange:        #F07901;   /* RelaDyne orange — secondary accent */
	--scja-red:           #DB0A31;   /* Lucalza red (CARIBBEAN Ltd) */
	--scja-ink:           #0E1622;   /* Near-black with navy undertone */
	--scja-steel:         #1A2433;   /* Steel for dark backgrounds */
	--scja-concrete:      #F4F6FA;   /* Cool light bg, complements navy */
	--scja-concrete-deep: #E5E9F2;   /* Slightly deeper concrete */
	--scja-line-light:    rgba(255, 255, 255, 0.12);
	--scja-line-dark:     rgba(2, 57, 121, 0.12);

	/* Legacy aliases — keep so existing widget templates keep rendering.
	   Old "rust" maps to navy now; old "cargo-yellow" maps to gold. */
	--scja-rust:          var(--scja-navy);
	--scja-rust-deep:     var(--scja-navy-deep);
	--scja-cargo-yellow:  var(--scja-gold);

	/* Typography */
	--scja-font-display:  'Archivo Black', 'Impact', sans-serif;
	--scja-font-body:     'Manrope', 'Helvetica Neue', Arial, sans-serif;
	--scja-font-mono:     'JetBrains Mono', 'Courier New', monospace;

	/* Spacing scale (used by .scja-section etc.) */
	--scja-pad-section:   120px;
	--scja-pad-section-m: 80px;
	--scja-max-width:     1400px;
}

/* =========================================================
   GLOBAL RESETS / BODY
   Hello Elementor handles most of this; we augment.
   ========================================================= */
body.scja-theme {
	font-family: var(--scja-font-body);
	color: var(--scja-ink);
	background: var(--scja-concrete);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.scja-theme h1,
body.scja-theme h2,
body.scja-theme h3,
body.scja-theme h4 {
	font-family: var(--scja-font-display);
	letter-spacing: -0.02em;
	line-height: 0.95;
}

/* =========================================================
   UTILITY / WIDGET CLASSES
   These are designed to be applied to Elementor sections,
   columns, and widgets via the "CSS Classes" advanced field.
   ========================================================= */

/* ----- Section base ----- */
.scja-section {
	padding: var(--scja-pad-section) 32px;
	position: relative;
}
@media (max-width: 900px) {
	.scja-section { padding: var(--scja-pad-section-m) 20px; }
}

.scja-section-inner {
	max-width: var(--scja-max-width);
	margin: 0 auto;
}

/* ----- Section labels (small mono uppercase tag with bar) ----- */
.scja-label {
	font-family: var(--scja-font-mono);
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--scja-rust);
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
}
.scja-label::before {
	content: "";
	width: 32px;
	height: 1px;
	background: currentColor;
}

/* On dark backgrounds the bar/label can be yellow */
.scja-bg-ink .scja-label,
.scja-label--yellow {
	color: var(--scja-cargo-yellow);
}

/* ----- Section titles ----- */
.scja-title {
	font-family: var(--scja-font-display);
	font-size: clamp(36px, 5vw, 64px);
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin: 0 0 24px;
}

.scja-title--hero {
	font-size: clamp(48px, 8vw, 124px);
	line-height: 0.88;
	letter-spacing: -0.03em;
}

/* Decorative emphasis spans */
.scja-accent { color: var(--scja-cargo-yellow); display: inline-block; transform: skew(-6deg); }
.scja-underline {
	text-decoration: underline;
	text-decoration-color: var(--scja-rust);
	text-decoration-thickness: 6px;
	text-underline-offset: 8px;
}

/* ----- Backgrounds ----- */
.scja-bg-ink       { background: var(--scja-ink); color: var(--scja-concrete); }
.scja-bg-navy      { background: var(--scja-navy); color: var(--scja-concrete); }
.scja-bg-navy-deep { background: var(--scja-navy-deep); color: var(--scja-concrete); }
.scja-bg-concrete  { background: var(--scja-concrete); color: var(--scja-ink); }
.scja-bg-concrete-deep { background: var(--scja-concrete-deep); color: var(--scja-ink); }
.scja-bg-rust      { background: var(--scja-navy); color: var(--scja-concrete); } /* was rust — repurposed to brand navy for the contact section */
.scja-bg-gold      { background: var(--scja-gold); color: var(--scja-ink); }
.scja-bg-red       { background: var(--scja-red); color: #fff; }

/* ----- Buttons (so they can be applied to Elementor button widgets via CSS Classes) ----- */
.scja-btn-primary,
.scja-btn-primary.elementor-button {
	background: var(--scja-gold) !important;
	color: var(--scja-navy) !important;
	font-family: var(--scja-font-body) !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	padding: 18px 28px !important;
	border-radius: 0 !important;
	border: none !important;
	transition: all 0.2s !important;
}
.scja-btn-primary:hover,
.scja-btn-primary.elementor-button:hover {
	background: var(--scja-gold-deep) !important;
	color: #fff !important;
	transform: translateY(-2px);
}

.scja-btn-secondary,
.scja-btn-secondary.elementor-button {
	background: transparent !important;
	color: var(--scja-concrete) !important;
	border: 1px solid var(--scja-line-light) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	padding: 18px 28px !important;
	border-radius: 0 !important;
	transition: all 0.2s !important;
}
.scja-btn-secondary:hover,
.scja-btn-secondary.elementor-button:hover {
	border-color: var(--scja-gold) !important;
	color: var(--scja-gold) !important;
}

/* ----- Marquee strip (top bar) ----- */
.scja-marquee {
	background: var(--scja-ink);
	color: var(--scja-concrete);
	border-bottom: 2px solid var(--scja-rust);
	overflow: hidden;
	white-space: nowrap;
	font-family: var(--scja-font-mono);
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 10px 0;
}
.scja-marquee-track {
	display: inline-block;
	animation: scja-scroll 35s linear infinite;
}
.scja-marquee-track span { margin: 0 32px; }
.scja-marquee-track .scja-dot { color: var(--scja-rust); }
@keyframes scja-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ----- Container visual / stencil plate ----- */
.scja-container-visual {
	position: relative;
	aspect-ratio: 4 / 5;
	background: linear-gradient(135deg, #2a2a2a 0%, #0e0e0e 100%);
	border: 1px solid var(--scja-line-light);
	overflow: hidden;
}
.scja-container-visual img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: contrast(1.1) saturate(0.85);
	mix-blend-mode: luminosity;
	opacity: 0.85;
}
.scja-container-visual::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(14,14,14,0.7) 100%);
}
.scja-stencil-plate {
	position: absolute;
	bottom: 24px; left: 24px; right: 24px;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: end;
	font-family: var(--scja-font-mono);
	color: var(--scja-cargo-yellow);
}
.scja-stencil-plate .id          { font-size: 12px; letter-spacing: 0.2em; line-height: 1.6; }
.scja-stencil-plate .id strong   { display: block; font-size: 18px; color: var(--scja-concrete); }
.scja-stencil-plate .dim         { text-align: right; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(242,239,232,0.6); }

.scja-corner-mark {
	position: absolute;
	width: 36px; height: 36px;
	border: 2px solid var(--scja-rust);
	z-index: 2;
}
.scja-corner-mark.tl { top: 16px; left: 16px;  border-right: none; border-bottom: none; }
.scja-corner-mark.tr { top: 16px; right: 16px; border-left: none;  border-bottom: none; }

/* ----- Hero stats strip ----- */
.scja-stats {
	border-top: 1px solid var(--scja-line-light);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 28px 0;
	margin-top: 80px;
}
.scja-stats > div {
	padding: 0 24px;
	border-right: 1px solid var(--scja-line-light);
}
.scja-stats > div:last-child { border-right: none; }
.scja-stats .num {
	font-family: var(--scja-font-display);
	font-size: 32px;
	color: var(--scja-cargo-yellow);
	line-height: 1;
	margin-bottom: 8px;
}
.scja-stats .label {
	font-family: var(--scja-font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(242,239,232,0.6);
}
@media (max-width: 900px) {
	.scja-stats { grid-template-columns: repeat(2, 1fr); }
	.scja-stats > div { padding: 16px; border-bottom: 1px solid var(--scja-line-light); }
	.scja-stats > div:nth-child(2) { border-right: none; }
}

/* ----- Spec list (dt/dd grid) ----- */
.scja-spec-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-top: 2px solid var(--scja-ink);
	margin-top: 40px;
}
.scja-spec-list > div {
	border-bottom: 1px solid var(--scja-line-dark);
	padding: 20px 0;
}
.scja-spec-list > div:nth-child(odd)  { padding-right: 24px; }
.scja-spec-list > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--scja-line-dark); }
.scja-spec-list dt {
	font-family: var(--scja-font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(14,14,14,0.5);
	margin-bottom: 6px;
}
.scja-spec-list dd {
	font-family: var(--scja-font-display);
	font-size: 18px;
	margin: 0;
}

/* ----- Process step card ----- */
.scja-step {
	padding: 40px 28px;
	border-right: 1px solid var(--scja-line-light);
	border-bottom: 1px solid var(--scja-line-light);
	transition: background 0.3s;
}
.scja-step:hover { background: rgba(217,83,30,0.05); }
.scja-step .num {
	font-family: var(--scja-font-display);
	font-size: 56px;
	color: #ffffff !important;
	line-height: 1;
	margin-bottom: 24px;
	letter-spacing: -0.04em;
}
.scja-step h3 {
	font-family: var(--scja-font-display);
	font-size: 18px;
	margin: 0 0 12px;
}
.scja-step p {
	font-size: 14px;
	color: rgba(242,239,232,0.7);
	line-height: 1.6;
	margin: 0;
}
.scja-step .meta {
	font-family: var(--scja-font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #ffffff !important;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed rgba(242,239,232,0.2);
}

/* ----- Info card (visit section) ----- */
.scja-info-card {
	background: var(--scja-concrete);
	border: 1px solid var(--scja-line-dark);
	padding: 36px;
	position: relative;
}
.scja-info-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 60px;
	height: 3px;
	background: var(--scja-rust);
}
.scja-info-card h3 {
	font-family: var(--scja-font-display);
	font-size: 22px;
	margin: 0 0 8px;
}
.scja-info-card .sublabel {
	font-family: var(--scja-font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--scja-rust);
	margin-bottom: 20px;
}
.scja-info-card .schedule {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: var(--scja-ink);
	color: var(--scja-concrete);
	margin-top: 20px;
}
.scja-info-card .schedule .day  { font-family: var(--scja-font-display); font-size: 14px; }
.scja-info-card .schedule .time { font-family: var(--scja-font-mono); font-size: 18px; color: var(--scja-cargo-yellow); margin-left: auto; }

/* ----- Contact list (hover slide) ----- */
.scja-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 2px solid var(--scja-ink);
}
.scja-contact-list li {
	border-bottom: 2px solid var(--scja-ink);
	padding: 24px 0;
	display: flex;
	align-items: center;
	gap: 24px;
	transition: padding 0.2s;
	cursor: pointer;
}
.scja-contact-list li:hover { padding-left: 12px; }
.scja-contact-list li:hover .arrow { transform: translateX(8px); }
.scja-contact-list a { display: contents; color: inherit; text-decoration: none; }
.scja-contact-list .icon {
	width: 48px; height: 48px;
	background: var(--scja-ink);
	color: var(--scja-rust);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.scja-contact-list .icon svg { width: 22px; height: 22px; }
.scja-contact-list .info { flex: 1; }
.scja-contact-list .info .label {
	font-family: var(--scja-font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(14,14,14,0.6);
	margin-bottom: 4px;
}
.scja-contact-list .info .value {
	font-family: var(--scja-font-display);
	font-size: 18px;
}
.scja-contact-list .arrow {
	font-size: 24px;
	transition: transform 0.2s;
}

/* ----- Response promise card ----- */
.scja-promise {
	border: 2px solid var(--scja-ink);
	padding: 24px;
	background: rgba(14,14,14,0.05);
}
.scja-promise .label {
	font-family: var(--scja-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.scja-promise .text {
	font-family: var(--scja-font-display);
	font-size: 24px;
	line-height: 1.1;
}

/* ----- Floating WhatsApp FAB ----- */
.scja-whatsapp-fab {
	position: fixed;
	bottom: 24px; right: 24px;
	z-index: 100;
	background: #25D366;
	color: white;
	width: 60px; height: 60px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
	transition: transform 0.2s;
	text-decoration: none;
}
.scja-whatsapp-fab:hover { transform: scale(1.08); color: white; }
.scja-whatsapp-fab svg { width: 30px; height: 30px; }

/* ----- Decorative giant background text (visit section) ----- */
.scja-bg-text {
	position: absolute;
	top: 30px;
	right: -40px;
	font-family: var(--scja-font-display);
	font-size: 220px;
	color: rgba(14,14,14,0.04);
	letter-spacing: -0.04em;
	pointer-events: none;
	white-space: nowrap;
	line-height: 1;
}

/* ----- Elementor button override safety net ----- */
body.scja-theme .elementor-button {
	border-radius: 0;
}