/* Reef Casa Contact — accordion, themed to logo palette.
   Each .rc-acc sets its own --tone (inline from PHP); descendants inherit it. */

.rc-contact{
	--ink:#1a1a1a;
	--line:#e6e9e8;
	--rc-btn:#2E7D74;
	max-width:760px;
	margin:0 auto;
	padding:8px 0 4px;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--ink);
	-webkit-font-smoothing:antialiased;
}

.rc-contact .rc-kicker{
	margin:0 0 16px;
	font-size:16px;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:#6b7a78;
	text-align:center;
}

/* ---- accordion item ---- */
.rc-acc{
	border:1px solid var(--line);
	border-radius:14px;
	background:#fff;
	margin-bottom:12px;
	overflow:hidden;
	box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.rc-acc-head{
	display:flex;
	align-items:center;
	gap:14px;
	width:100%;
	padding:18px 20px;
	border:none;
	background:transparent;
	cursor:pointer;
	font-family:inherit;
	font-size:17px;
	font-weight:600;
	color:var(--ink);
	text-align:left;
	transition:background .15s ease;
}
.rc-acc-head:hover{background:color-mix(in srgb,var(--tone) 7%,#fff);}
.rc-acc-bar{
	flex:0 0 auto;
	width:4px;
	height:26px;
	border-radius:3px;
	background:var(--tone);
}
.rc-acc-label{flex:1;}
.rc-acc-chev{
	flex:0 0 auto;
	width:20px;
	height:20px;
	color:var(--tone);
	transition:transform .25s ease;
}
.rc-acc.is-open .rc-acc-head{background:color-mix(in srgb,var(--tone) 8%,#fff);}
.rc-acc.is-open .rc-acc-chev{transform:rotate(180deg);}

/* collapsible body (grid trick = smooth on variable height) */
.rc-acc-body{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .28s ease;
}
.rc-acc.is-open .rc-acc-body{grid-template-rows:1fr;}
.rc-acc-inner{overflow:hidden;}
.rc-acc-pad{padding:6px 20px 24px;}

.rc-acc h3{
	margin:6px 0 8px;
	font-size:21px;
	font-weight:600;
	letter-spacing:-.01em;
	color:var(--tone);
}
.rc-acc > .rc-acc-body p,
.rc-acc-pad > p{
	margin:0 0 16px;
	font-size:15.5px;
	line-height:1.55;
	color:#3f4a48;
}

/* split layout — only present when a panel has an image.
   Mobile: image stacked on top, body (heading/text/form) below. */
.rc-split{display:flex;flex-direction:column;}
.rc-split-media{min-width:0;}
.rc-split-body{min-width:0;}

/* panel image / banner */
.rc-photo{
	height:180px;
	margin:0 -20px 18px;
	background-size:cover;
	background-position:center 38%;
	border-bottom:1px solid var(--line);
}

/* ---- forms ---- */
.rc-form{display:flex;flex-direction:column;gap:13px;}
.rc-form label{
	display:flex;
	flex-direction:column;
	gap:6px;
	font-size:14px;
	font-weight:600;
	color:#2b3432;
}
.rc-form label span{color:#c2562f;font-weight:600;}
.rc-form input,
.rc-form textarea{
	width:100%;
	box-sizing:border-box;
	padding:13px 14px;
	font-size:16px; /* prevents iOS zoom */
	font-family:inherit;
	color:var(--ink);
	background:#fff;
	border:1.5px solid var(--line);
	border-radius:10px;
	transition:border-color .15s ease,box-shadow .15s ease;
}
.rc-form input:focus,
.rc-form textarea:focus{
	outline:none;
	border-color:var(--tone);
	box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 18%,#fff);
}
.rc-form textarea{resize:vertical;min-height:90px;}

.rc-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;}

.rc-file input[type=file]{padding:11px 14px;font-size:14px;}
.rc-hint{font-weight:400;color:#8a938f;font-size:13px;}

/* honeypot */
.rc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---- buttons ---- */
.rc-btn{
	display:inline-block;
	align-self:flex-start;
	cursor:pointer;
	margin-top:4px;
	min-width:200px;
	padding:14px 26px;
	border:none;
	border-radius:11px;
	background:var(--rc-btn);
	color:#fff;
	font-size:16px;
	font-weight:600;
	font-family:inherit;
	letter-spacing:.01em;
	text-align:center;
	text-decoration:none;
	transition:filter .15s ease,transform .05s ease;
}
.rc-btn:hover{filter:brightness(.93);color:#fff;}
.rc-btn:active{transform:translateY(1px);}

/* ---- banners ---- */
.rc-banner{
	margin:0 0 18px;
	padding:14px 16px;
	border-radius:10px;
	font-size:15px;
	font-weight:500;
	line-height:1.45;
}
.rc-banner--ok{background:#e8f4ef;color:#0c5a45;border:1px solid #b9e0d2;}
.rc-banner--err{background:#fdecea;color:#922118;border:1px solid #f3c4bd;}

/* ---- mobile ---- */
@media (max-width:560px){
	.rc-acc-pad{padding:4px 16px 20px;}
	.rc-photo{height:150px;margin:0 -16px 16px;}
	.rc-acc h3{font-size:19px;}
	.rc-row{grid-template-columns:1fr;}
	.rc-btn{width:100%;text-align:center;align-self:stretch;}
}

/* ---- desktop (≥768px): pills span the full width in one row ---- */
@media (min-width:768px){
	.rc-contact{max-width:1040px;}
	.rc-items{
		display:flex;
		flex-wrap:wrap;          /* lets the open panel drop below; pills stay one row */
		align-items:stretch;
		gap:12px;
	}
	.rc-acc{display:contents;}   /* promote header + body to flex items */

	/* headers become equal-width pills that fill the row */
	.rc-acc-head{
		order:1;
		flex:1 1 0;              /* equal widths, always one row */
		min-width:0;
		width:auto;
		justify-content:center;
		text-align:center;
		line-height:1.25;
		padding:15px 18px;       /* ~25% larger */
		border:1.5px solid var(--tone);
		border-radius:13px;
		background:transparent;
		color:#006060;           /* logo teal text */
		font-size:19px;          /* ~25% larger */
	}
	.rc-acc-head:hover{background:color-mix(in srgb,var(--tone) 10%,#fff);}
	.rc-acc-head .rc-acc-bar,
	.rc-acc-head .rc-acc-chev{display:none;}
	.rc-acc.is-open .rc-acc-head{background:var(--tone);color:#fff;}

	/* open panel: full-width row below the pills, content kept readable */
	.rc-acc-body{
		order:2;
		flex:0 0 100%;
		display:none;
		grid-template-rows:none;
	}
	.rc-acc.is-open .rc-acc-body{display:block;}
	.rc-acc-inner{overflow:visible;}
	.rc-acc-pad{
		max-width:760px;
		margin:12px auto 0;
		padding:26px;
		border:1px solid var(--line);
		border-radius:16px;
		background:#fff;
		box-shadow:0 1px 2px rgba(16,24,40,.04);
	}
	.rc-split{flex-direction:row;align-items:stretch;gap:24px;}
	.rc-split-body{order:1;flex:1 1 auto;}
	.rc-split-media{order:2;flex:0 0 42%;}
	.rc-photo{height:100%;margin:0;border-bottom:none;border-radius:12px;}
}

/* ===========================================================================
   Theme-override guard (Woodmart styles plain <button>, which was filling the
   pills gray). Scope + !important force the plugin's outlined look to win.
   Teal text matches the site header bar (#80B0B0).
   =========================================================================== */
.rc-contact .rc-acc-head{
	background:transparent !important;
	border:none !important;
	box-shadow:none !important;
	text-shadow:none !important;
	text-transform:none !important;
	letter-spacing:normal !important;
	color:var(--ink) !important;          /* mobile: dark label */
}
.rc-contact .rc-acc.is-open .rc-acc-head{
	background:color-mix(in srgb,var(--tone) 8%,#fff) !important;
}
.rc-contact .rc-btn{
	background:var(--rc-btn) !important;
	color:#fff !important;
	border:none !important;
	border-radius:11px !important;
	box-shadow:none !important;
	text-shadow:none !important;
	text-transform:none !important;
	padding:14px 26px !important;
	min-width:200px !important;
	height:auto !important;
	font-size:16px !important;
	font-weight:600 !important;
	line-height:1.2 !important;
	letter-spacing:.01em !important;
	text-align:center !important;
}

@media (min-width:768px){
	.rc-contact .rc-acc-head{
		background:transparent !important;
		border:1.5px solid var(--tone) !important;
		border-radius:13px !important;
		color:#006060 !important;         /* desktop pill text = deep logo teal */
	}
	.rc-contact .rc-acc.is-open .rc-acc-head{
		background:var(--tone) !important;
		border-color:var(--tone) !important;
		color:#fff !important;
	}
}