/*
Theme Name: Client Access
Theme URI: https://www.clientaccess.net/
Author: clientaccess.net, llc
Description: Block theme for clientaccess.net.
Version: 1.0.3
Requires at least: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: clientaccess
*/

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
:where(section, .wp-block-group)[id] { scroll-margin-top: 24px; }
.wp-site-blocks { padding-top: 0; padding-bottom: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
a { text-underline-offset: 3px; }

/* ---------- header ---------- */
.ca-header { border-bottom: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); }
.ca-brand { display: flex; align-items: center; text-decoration: none; color: var(--wp--preset--color--logo); }
.ca-brand:hover { color: var(--wp--preset--color--logo); }
/* traced from the original clientaccess.gif; viewBox is 6.4 : 1 */
.ca-logo { display: block; height: 36px; width: 230px; flex-shrink: 0; }
@media (max-width: 560px) {
	.ca-logo { height: 30px; width: 192px; }
}
.ca-nav { font-size: 15px; font-weight: 500; }
.ca-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--slate-dark); }
.ca-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--ink); }
.ca-header-actions .wp-block-button__link { font-size: 15px; padding: 10px 16px; }

/* ---------- buttons ---------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line-strong);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--ink); }
.wp-block-button__link:hover { filter: brightness(0.92); }

/* ---------- sections ---------- */
.ca-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin: 0; }
.ca-lead { font-size: 19px; color: var(--wp--preset--color--slate); }
.ca-hero h1 { font-size: clamp(38px, 5vw, 54px); line-height: 1.08; letter-spacing: -0.02em; }
.ca-section h2 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -0.015em; }

/* hero app illustration */
.ca-app { background: #fff; border: 1px solid #dde2e8; border-radius: 14px; box-shadow: 0 24px 48px rgba(20, 26, 33, 0.10); overflow: hidden; font-family: var(--wp--preset--font-family--inter); }
.ca-app-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #eef0f3; background: #fafbfc; }
.ca-app-bar i { width: 10px; height: 10px; border-radius: 50%; background: #dfe3e8; }
.ca-app-bar span { margin-left: 12px; font-size: 12px; color: #6b7684; }
.ca-app-body { display: flex; }
.ca-app-side { width: 150px; flex-shrink: 0; background: #1d232b; color: #c4ccd6; font-size: 13px; padding: 16px 0; display: flex; flex-direction: column; gap: 2px; }
.ca-app-side span { padding: 7px 18px; }
.ca-app-side .on { background: #2c3540; color: #fff; border-left: 3px solid var(--wp--preset--color--accent); }
.ca-app-main { flex: 1; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.ca-app-head { display: flex; justify-content: space-between; align-items: center; }
.ca-app-head b { font-family: var(--wp--preset--font-family--sora); font-weight: 600; font-size: 16px; }
.ca-app-head span { font-size: 12px; color: #fff; background: var(--wp--preset--color--accent); padding: 4px 10px; border-radius: 6px; }
.ca-app-table { display: grid; grid-template-columns: 52px minmax(0, 1fr) 80px; font-size: 13px; border: 1px solid #eef0f3; border-radius: 8px; overflow: hidden; }
.ca-app-table > span { padding: 8px 10px; border-top: 1px solid #eef0f3; }
.ca-app-table > .th { background: #f5f7fa; color: #6b7684; font-weight: 600; border-top: 0; }
.ca-app-table > .n { color: #6b7684; }
.ca-pill { padding: 2px 8px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.ca-pill.open { background: #fdecd8; color: #8a4a06; }
.ca-pill.work { background: #e3ecfb; color: #1f4c99; }
.ca-pill.done { background: #e2f3e8; color: #1d6b3a; }
.ca-app-mon { border: 1px solid #eef0f3; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ca-app-mon span { font-size: 12px; color: #6b7684; font-weight: 600; }
.ca-strip { display: flex; height: 10px; border-radius: 4px; overflow: hidden; }
.ca-strip i { display: block; }
.ok { background: #2f9e5a; }
.bad { background: #ea6a1f; }
@media (max-width: 560px) {
	.ca-app-side { display: none; }
}

/* feature cards */
.ca-card { border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 28px; }
.ca-card > * { margin: 0; }
.ca-card > * + * { margin-top: 12px; }
.ca-card h3 { font-size: 20px; }
.ca-card p { color: var(--wp--preset--color--slate); }
.ca-icon svg { width: 28px; height: 28px; stroke: var(--wp--preset--color--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* dark monitoring band */
.ca-dark { color: #dbe1e8; }
.ca-dark h2 { color: #fff; }
.ca-dark .ca-eyebrow { color: #8fb4ff; }
.ca-dark .ca-lead { color: #b9c2cd; font-size: 18px; }
.ca-checklist { list-style: none; padding: 0; margin-bottom: 0; display: flex; flex-direction: column; gap: 14px; }
.ca-checklist li { position: relative; padding-left: 34px; }
.ca-checklist li::before {
	content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; background: #8fb4ff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ca-mon { background: #1d252f; border: 1px solid #2c3743; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.ca-mon-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ca-mon-head b { font-family: var(--wp--preset--font-family--sora); font-weight: 600; color: #fff; }
.ca-mon-head span { font-size: 13px; color: #9aa6b4; }
.ca-mon .ca-strip { height: 28px; border-radius: 6px; gap: 2px; }
.ca-events { display: flex; flex-direction: column; font-size: 14px; }
.ca-events div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid #2c3743; color: #c4ccd6; }
.ca-events div:first-child { border-top: 0; }
.ca-events time { color: #9aa6b4; }
.ca-legend { display: flex; gap: 20px; font-size: 13px; color: #b9c2cd; }
.ca-legend span { display: flex; align-items: center; gap: 8px; }
.ca-legend i { width: 10px; height: 10px; border-radius: 2px; }

/* why */
.ca-point { border-top: 2px solid var(--wp--preset--color--ink); padding-top: 20px; }
.ca-point > * { margin: 0; }
.ca-point > * + * { margin-top: 10px; }
.ca-point h3 { font-size: 20px; }
.ca-point p { color: var(--wp--preset--color--slate); }

/* contact */
.ca-contact-links p { margin: 0; font-size: 17px; }
.ca-contact-links a { color: var(--wp--preset--color--ink); font-weight: 600; text-decoration: none; }
.ca-contact-links .mail a { color: var(--wp--preset--color--accent); font-weight: 400; text-decoration: underline; }
.ca-form-card { background: #fff; border: 1px solid #e1e5ea; border-radius: 14px; padding: 32px; }
.ca-form-card .wpcf7 form > p { margin: 0 0 18px; }
.ca-form-card .wpcf7 label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.ca-form-card .wpcf7 label br { display: none; }
.ca-form-card .wpcf7-form-control-wrap { display: block; }
.ca-form-card input[type="text"],
.ca-form-card input[type="email"],
.ca-form-card textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; font-weight: 400;
	padding: 12px 14px; border: 1px solid var(--wp--preset--color--line-strong); border-radius: 8px; background: #fff; color: var(--wp--preset--color--ink);
}
.ca-form-card input:focus, .ca-form-card textarea:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; border-color: var(--wp--preset--color--accent); }
.ca-form-card textarea { resize: vertical; min-height: 120px; }
/* CF7 wraps both labels of a row in one <p>, so the grid goes on that <p> */
.ca-form-card .ca-form-row > p { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px; }
.ca-form-card .ca-form-row > p > br { display: none; }
.ca-form-card .wpcf7-submit {
	font: inherit; font-weight: 600; color: #fff; background: var(--wp--preset--color--accent);
	border: 0; border-radius: 10px; padding: 15px 24px; cursor: pointer;
}
.ca-form-card .wpcf7-submit:hover { filter: brightness(0.92); }
.ca-form-card .wpcf7-spinner { vertical-align: middle; }
.ca-form-card .wpcf7-response-output { margin: 12px 0 0 !important; border-radius: 8px; }

/* footer */
.ca-footer { font-size: 14px; color: #9aa6b4; }
.ca-footer .ca-brand { color: #fff; }
.ca-footer .ca-logo { height: 26px; width: 166px; }
.ca-footer p { margin: 0; }
.ca-footer a { color: #c4ccd6; }
.ca-footer a:hover { color: #fff; }
.ca-footer a + a { margin-left: 20px; }

/* plain pages */
.ca-page { min-height: 50vh; }