/*
Theme Name: Rito Pack · Astra
Template: astra
Version: 0.1.0
Description: Astra child theme for dexin-pack.com. Visual system follows the IBM Carbon reference (design.md §7): white canvas, charcoal ink, one blue accent, square corners, light-weight display type.
Text Domain: rito-astra
*/

/* ---------------------------------------------------------------- tokens */
:root {
	/* Brand — single accent. Placeholder until derived from the Rito Pack logo. */
	--brand:        #0f62fe;
	--brand-hover:  #0050e6;
	--brand-press:  #002d9c;
	--brand-dark:   #0043ce;

	/* Ink & surfaces */
	--ink:          #161616;
	--ink-muted:    #525252;
	--ink-subtle:   #8c8c8c;
	--canvas:       #ffffff;
	--surface-1:    #f4f4f4;
	--surface-2:    #e0e0e0;
	--line:         #e0e0e0;
	--line-strong:  #161616;
	--inverse:      #161616;
	--inverse-1:    #262626;
	--inverse-ink:  #ffffff;
	--inverse-muted:#c6c6c6;

	/* Semantic */
	--success:      #24a148;
	--warning:      #f1c21b;
	--error:        #da1e28;
	--whatsapp:     #25d366;

	/* Type */
	--font:         "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
	--track:        0.16px;

	/* Shape & spacing (4px grid) */
	--radius:       0px;
	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --section: 96px;
	--container:    1200px;
	--gutter:       24px;
}

/* ---------------------------------------------------------------- base */
html { -webkit-text-size-adjust: 100%; }
body,
button, input, select, textarea {
	font-family: var(--font);
}
body {
	color: var(--ink);
	background: var(--canvas);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: var(--track);
	-webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
	color: var(--ink);
	font-family: var(--font);
	letter-spacing: 0;
	margin: 0 0 var(--s4);
}
h1, .rp-display  { font-size: clamp(36px, 5vw, 60px); font-weight: 300; line-height: 1.17; letter-spacing: -0.4px; }
h2, .rp-display-md { font-size: clamp(28px, 3.4vw, 42px); font-weight: 300; line-height: 1.2; }
h3, .rp-headline { font-size: clamp(22px, 2.4vw, 32px); font-weight: 400; line-height: 1.25; }
h4, .rp-card-title { font-size: 20px; font-weight: 400; line-height: 1.4; }
p { margin: 0 0 var(--s4); }
.rp-lead    { font-size: 18px; line-height: 1.5; color: var(--ink-muted); letter-spacing: 0; }
.rp-eyebrow { font-size: 14px; line-height: 1.29; color: var(--ink-muted); margin-bottom: var(--s3); }
.rp-caption { font-size: 12px; line-height: 1.33; letter-spacing: 0.32px; color: var(--ink-muted); }
.rp-muted   { color: var(--ink-muted); }

/* ---------------------------------------------------------------- layout */
.rp-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.rp-section { padding: var(--section) 0; }
.rp-section--tight { padding: var(--s8) 0; }
.rp-band { background: var(--surface-1); }
.rp-grid { display: grid; gap: var(--s5); }
.rp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rp-section-head { max-width: 760px; margin-bottom: var(--s7); }

/* Astra: let our templates own the full width */
.rp-full #content > .ast-container { max-width: none; padding: 0; display: block; }
.rp-full #primary { width: 100%; margin: 0 !important; padding: 0 !important; }
.rp-full #secondary { display: none; }

/* ---------------------------------------------------------------- buttons */
.rp-btn,
.wpcf7-submit,
.ast-button, .button, button.button {
	display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s6);
	min-height: 48px; padding: 12px 16px;
	border: 1px solid transparent; border-radius: var(--radius);
	font: 400 14px/1.29 var(--font); letter-spacing: var(--track);
	cursor: pointer; transition: background-color .11s ease, color .11s ease;
}
.rp-btn--primary, .wpcf7-submit, .ast-button { background: var(--brand); color: #fff; }
.rp-btn--primary:hover, .wpcf7-submit:hover, .ast-button:hover { background: var(--brand-hover); color: #fff; }
.rp-btn--primary:active { background: var(--brand-press); }
.rp-btn--secondary { background: var(--ink); color: #fff; }
.rp-btn--secondary:hover { background: #393939; color: #fff; }
.rp-btn--tertiary { background: transparent; color: var(--brand); border-color: var(--brand); }
.rp-btn--tertiary:hover { background: var(--brand); color: #fff; }
.rp-btn--ghost { background: transparent; color: var(--brand); padding-left: 0; padding-right: 0; justify-content: flex-start; gap: var(--s2); }
.rp-btn--whatsapp { background: var(--whatsapp); color: #fff; }
.rp-btn--whatsapp:hover { background: #1ebe5b; color: #fff; }
.rp-btn .rp-arrow { font-size: 18px; line-height: 1; }
.rp-actions { display: flex; flex-wrap: wrap; gap: 1px; }

/* ---------------------------------------------------------------- cards */
.rp-card {
	display: flex; flex-direction: column;
	background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius);
	color: var(--ink); transition: background-color .11s ease;
}
a.rp-card:hover, .rp-card--link:hover { background: var(--surface-1); color: var(--ink); }
.rp-card__media { aspect-ratio: 4 / 3; background: var(--surface-1); overflow: hidden; }
.rp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-card__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.rp-card__title { font-size: 20px; line-height: 1.4; margin: 0; color: var(--ink); }
.rp-card__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: 14px; color: var(--ink-muted); }
.rp-card__more { margin-top: auto; color: var(--brand); font-size: 14px; }
.rp-tag {
	display: inline-flex; align-items: center; gap: var(--s1);
	padding: 2px 8px; background: var(--surface-1); color: var(--ink);
	font-size: 12px; letter-spacing: 0.32px; border-radius: 2px;
}

/* ---------------------------------------------------------------- spec tables */
.rp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); }
.rp-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--canvas); margin: 0; }
.rp-table th, .rp-table td { padding: 14px 16px; text-align: left; border: 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rp-table thead th { background: var(--surface-2); font-weight: 600; color: var(--ink); white-space: nowrap; }
.rp-table tbody th { font-weight: 400; color: var(--ink-muted); white-space: nowrap; }
.rp-table tbody tr:hover { background: var(--surface-1); }
.rp-table .rp-unit { color: var(--ink-subtle); font-size: 12px; }

/* ---------------------------------------------------------------- key specs strip */
.rp-keyspecs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.rp-keyspec { padding: var(--s4); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rp-keyspec__value { font-size: 28px; font-weight: 300; line-height: 1.2; color: var(--ink); }
.rp-keyspec__unit { font-size: 14px; color: var(--ink-muted); margin-left: 4px; }
.rp-keyspec__label { font-size: 12px; letter-spacing: 0.32px; color: var(--ink-muted); margin-top: var(--s1); }

/* ---------------------------------------------------------------- FAQ */
.rp-faq { border-top: 1px solid var(--line); }
.rp-faq details { border-bottom: 1px solid var(--line); }
.rp-faq summary {
	list-style: none; cursor: pointer; padding: var(--s4) var(--s7) var(--s4) 0; position: relative;
	font-size: 16px; color: var(--ink);
}
.rp-faq summary::-webkit-details-marker { display: none; }
.rp-faq summary::after { content: "+"; position: absolute; right: var(--s4); top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 300; color: var(--ink-muted); }
.rp-faq details[open] summary::after { content: "−"; }
.rp-faq summary:hover { background: var(--surface-1); }
.rp-faq .rp-faq__a { padding: 0 var(--s7) var(--s5) 0; color: var(--ink-muted); max-width: 820px; }

/* ---------------------------------------------------------------- steps */
.rp-steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--line); }
.rp-step { counter-increment: step; padding: var(--s5) var(--s5) var(--s5) 0; }
.rp-step::before { content: counter(step, decimal-leading-zero); display: block; font-size: 14px; color: var(--brand); margin-bottom: var(--s3); }
.rp-step h4 { font-size: 16px; font-weight: 600; margin-bottom: var(--s2); }
.rp-step p { font-size: 14px; color: var(--ink-muted); margin: 0; }

/* ---------------------------------------------------------------- stats */
.rp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.rp-stat { padding: var(--s5) var(--s5) 0 0; }
.rp-stat__value { font-size: clamp(36px, 4vw, 54px); font-weight: 300; line-height: 1.1; }
.rp-stat__label { font-size: 14px; color: var(--ink-muted); margin-top: var(--s2); }

/* ---------------------------------------------------------------- filters */
.rp-filters { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: var(--s6); }
.rp-filter {
	padding: 16px 20px; font-size: 14px; color: var(--ink-muted); background: none; border: 0;
	border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; border-radius: 0;
}
.rp-filter:hover { color: var(--ink); background: var(--surface-1); }
.rp-filter.is-active, .rp-filter[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); }

/* ---------------------------------------------------------------- breadcrumb */
.rp-breadcrumb { font-size: 14px; color: var(--ink-muted); padding: var(--s4) 0; }
.rp-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.rp-breadcrumb li + li::before { content: "/"; margin-right: var(--s2); color: var(--ink-subtle); }
.rp-breadcrumb a { color: var(--brand); }

/* ---------------------------------------------------------------- forms */
.rp-form label, .wpcf7 label { display: block; font-size: 12px; letter-spacing: 0.32px; color: var(--ink-muted); margin-bottom: var(--s2); }
.rp-form input[type=text], .rp-form input[type=email], .rp-form input[type=tel], .rp-form input[type=number], .rp-form select, .rp-form textarea,
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 input[type=number], .wpcf7 select, .wpcf7 textarea {
	width: 100%; background: var(--surface-1); color: var(--ink);
	border: 0; border-bottom: 1px solid var(--ink-subtle); border-radius: 0;
	padding: 11px 16px; font: 400 14px/1.29 var(--font); letter-spacing: var(--track);
}
.rp-form :is(input, select, textarea):focus, .wpcf7 :is(input, select, textarea):focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.wpcf7-not-valid { box-shadow: inset 0 -2px 0 var(--error); }

/* ---------------------------------------------------------------- CTA banner */
.rp-cta { background: var(--brand); color: #fff; padding: var(--s7); display: flex; align-items: center; justify-content: space-between; gap: var(--s6); }
.rp-cta h2, .rp-cta h3 { color: #fff; margin: 0 0 var(--s2); }
.rp-cta p { color: #e5ecff; margin: 0; }
.rp-cta .rp-btn--secondary { background: var(--ink); }

/* ---------------------------------------------------------------- header (Astra) */
.ast-primary-header-bar, .main-header-bar { background: var(--canvas); border-bottom: 1px solid var(--line) !important; }
.main-header-menu > .menu-item > .menu-link { font-size: 14px; color: var(--ink); letter-spacing: var(--track); }
.main-header-menu > .menu-item:hover > .menu-link,
.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current-menu-ancestor > .menu-link { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
.main-header-menu .sub-menu { border-radius: 0; border: 1px solid var(--line); box-shadow: none; }
.ast-header-button-1 .ast-custom-button { border-radius: 0 !important; }

/* ---------------------------------------------------------------- footer */
.rp-footer { background: var(--inverse); color: var(--inverse-muted); font-size: 14px; }
.rp-footer a { color: var(--inverse-muted); }
.rp-footer a:hover { color: #fff; }
.rp-footer h2, .rp-footer h3 { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: var(--s4); }
.rp-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s6); padding: var(--s8) 0 var(--s7); }
.rp-footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.rp-footer__bottom { border-top: 1px solid var(--inverse-1); padding: var(--s5) 0; display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; font-size: 12px; }
.rp-footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--s5); }

/* ---------------------------------------------------------------- floating WhatsApp (mobile) */
.rp-wa-float { display: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
	.rp-grid--3, .rp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rp-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	:root { --section: 56px; --gutter: 16px; }
	.rp-grid--2, .rp-grid--3, .rp-grid--4 { grid-template-columns: 1fr; }
	.rp-cta { flex-direction: column; align-items: flex-start; padding: var(--s6) var(--s5); }
	.rp-footer__grid { grid-template-columns: 1fr; gap: var(--s5); }
	.rp-wa-float {
		display: flex; position: fixed; right: 16px; bottom: 16px; z-index: 99;
		width: 56px; height: 56px; align-items: center; justify-content: center;
		background: var(--whatsapp); color: #fff; border-radius: 50%;
	}
	.rp-wa-float svg { width: 28px; height: 28px; fill: currentColor; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}