/*
Theme Name: Gutierrez Chiropractic (Comunidad)
Description: Design-only child theme of Ollie for Gutierrez Chiropractic. Warm, communal and bilingual: cream paper, talavera blue, nopal green and marigold, rounded Lexend Deca type, hand-drawn flowers. Behavior comes from the oranj-core plugin.
Template: ollie
Version: 0.1.0
Text Domain: gutierrez-chiro-comunidad
*/

/* Tokens: names shared with oranj-core's motion.css; the values are this design's. */
:root {
	--oranj-ink-rgb: 29, 74, 59;
	--oranj-primary-rgb: 43, 102, 82;
	--oranj-bar-bg: rgba(255, 249, 234, .95);
	--oranj-radius: 22px;
	--oranj-radius-sm: 14px;
	--oranj-shadow: 0 14px 30px -22px rgba(29, 74, 59, .45);
	--oranj-tint: var(--wp--preset--color--primary-accent);
	--oranj-mint: var(--wp--preset--color--tertiary);
	--oranj-green: var(--wp--preset--color--primary);
	--oranj-yellow: var(--wp--preset--color--primary-alt);
	--oranj-blue: var(--wp--preset--color--cobalt);
	--oranj-ink: var(--wp--preset--color--main);
	--oranj-cream: var(--wp--preset--color--base);
	--oranj-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Sections */
.oranj-section { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); }
/* Soft pastel glow that fades out instead of ending in a hard edge */
.oranj-glow { position: relative; isolation: isolate; background: var(--wp--preset--color--base); }
.oranj-glow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(60% 80% at 100% 45%, #D6E8F0 0%, rgba(214, 232, 240, 0) 70%), radial-gradient(55% 80% at 0% 70%, #D3F1E5 0%, rgba(211, 241, 229, 0) 70%);
	-webkit-mask-image: linear-gradient(#000 60%, transparent 100%); mask-image: linear-gradient(#000 60%, transparent 100%); }
.oranj-hero-wrap.oranj-glow::before { -webkit-mask-image: none; mask-image: none; }
.oranj-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 600; display: flex; align-items: center; gap: .75rem; }
.oranj-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; opacity: .6; }
.oranj-light-heading { font-weight: 300 !important; letter-spacing: -0.03em; line-height: 1.08; }
.oranj-light-heading strong { font-weight: 500; }

/* Header */
.oranj-header { padding-top: .9rem; padding-bottom: .9rem; }
.oranj-header .wp-block-navigation { font-size: .95rem; }
.oranj-header .wp-block-button.is-style-outline .wp-block-button__link { border: 1px solid var(--wp--preset--color--primary); }

/* Cards */
.oranj-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border-light); border-radius: var(--oranj-radius); padding: clamp(1.4rem, 2.5vw, 2rem); height: 100%; box-shadow: var(--oranj-shadow); box-sizing: border-box; }
.oranj-card > :first-child { margin-top: 0; }
.oranj-card > :last-child { margin-bottom: 0; }
.oranj-card h3, .oranj-card h2 { margin-top: 0; }
.oranj-card--mint { background: var(--oranj-mint); border-color: transparent; box-shadow: none; }
.oranj-card--tint { background: var(--oranj-tint); border-color: transparent; box-shadow: none; }
.oranj-card--dark { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); border-color: transparent; }
.oranj-card--dark h2, .oranj-card--dark h3 { color: var(--wp--preset--color--base); }

/* Arrow chip: a round arrow button on linked cards (services) */
.oranj-arrow { position: relative; padding-right: 4.5rem; }
.oranj-arrow::after { content: "↗"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: var(--wp--preset--color--base); color: var(--wp--preset--color--primary); display: grid; place-items: center; font-size: 1.1rem; transition: transform .2s, background .2s, color .2s; }
.oranj-arrow:hover::after { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); transform: translateY(-50%) rotate(45deg); }
.oranj-arrow a { text-decoration: none; }
.oranj-arrow a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.oranj-arrow h3 { font-size: 1.15rem; margin: 0 0 .3rem; }
.oranj-arrow p { margin: 0; font-size: .92rem; color: var(--wp--preset--color--secondary); }
.wp-block-post-template > li:nth-child(odd) .oranj-arrow { background: var(--oranj-mint); }
.wp-block-post-template > li:nth-child(even) .oranj-arrow { background: var(--oranj-tint); }
.oranj-arrow { border-color: transparent; box-shadow: none; }

/* Pills + chips */
.oranj-chip { display: inline-block; background: var(--wp--preset--color--base); border-radius: 999px; padding: .45rem 1rem; font-size: .85rem; font-weight: 500; margin: 0 .4rem .4rem 0; }
.oranj-btn-soft .wp-block-button__link { background: var(--wp--preset--color--tertiary); color: var(--wp--preset--color--primary); border: 1px solid var(--wp--preset--color--border-light); }
.oranj-btn-mint .wp-block-button__link { background: var(--oranj-mint); color: var(--wp--preset--color--primary-alt-accent); }
.oranj-check { list-style: none; padding-left: 0; }
.oranj-check li { padding-left: 2rem; position: relative; margin-bottom: .75rem; }
.oranj-check li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--oranj-mint); color: var(--wp--preset--color--primary); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }

/* Photos */
.oranj-photo img { border-radius: var(--oranj-radius); width: 100%; height: auto; display: block; box-shadow: var(--oranj-shadow); }
.oranj-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 50%; display: block; }
.oranj-avatar { width: 96px; height: 96px; flex: 0 0 96px; background: var(--oranj-mint); border-radius: 50%; overflow: hidden; margin: 0; }

/* Hero visual: cut-out portrait over a soft circle */
.oranj-hero-visual { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 460px; margin: 0; }
/* Reserve the portrait's full height (img max-height is 560px) so the page below doesn't jump when the image arrives late. */
@media (min-width: 782px) { .oranj-hero-visual { min-height: 560px; } }
.oranj-hero-visual::before { content: ""; position: absolute; width: min(100%, 460px); aspect-ratio: 1; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff 0%, var(--oranj-mint) 75%); }
.oranj-hero-visual img { position: relative; max-height: 560px; width: auto; max-width: 100%; display: block; margin-bottom: -1px; }
.oranj-hero-wrap { overflow: hidden; }
.oranj-hero-wrap .wp-block-columns { margin-bottom: 0; }
.oranj-float { position: absolute; z-index: 2; background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); border-radius: 18px; padding: .8rem 1.1rem; box-shadow: var(--oranj-shadow); font-size: .85rem; line-height: 1.4; }
.oranj-float strong { display: block; color: var(--wp--preset--color--primary); }
.oranj-float--a { left: 0; bottom: 18%; }
.oranj-float--b { right: 0; top: 14%; }

/* Slider: any Query Loop with the "oranj-slider" class becomes a swipeable carousel. */
.oranj-slider { position: relative; }
.oranj-slider .wp-block-post-template { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem .25rem 1.5rem; margin: 0; list-style: none; scrollbar-width: thin; }
.oranj-slider .wp-block-post-template > li { flex: 0 0 min(380px, 85%); scroll-snap-align: start; margin: 0; }
.oranj-slider-nav { display: flex; gap: .5rem; justify-content: flex-end; margin-bottom: .5rem; }
.oranj-slider-nav button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--oranj-mint); color: var(--wp--preset--color--primary); font-size: 1.2rem; cursor: pointer; }
.oranj-slider-nav button:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }
.oranj-quote .wp-block-post-content { font-size: 1.02rem; line-height: 1.65; }
.oranj-quote .wp-block-post-title { font-size: .9rem; margin: 1.1rem 0 0; color: var(--wp--preset--color--primary); font-weight: 600; }

/* Footer */
.oranj-footer { border-radius: var(--oranj-radius) var(--oranj-radius) 0 0; }
.oranj-footer a { color: var(--wp--preset--color--primary-alt); }
.oranj-footer a:hover { color: var(--wp--preset--color--base); }

@media (max-width: 781px) {
	.oranj-hero-visual { min-height: 340px; }
	.oranj-float { display: none; }
	.oranj-header .wp-block-buttons .is-style-outline { display: none; }
}

/* Stacked cards in one column: share the height instead of each forcing 100% */
.oranj-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.oranj-stack > .oranj-card { height: auto; }
.oranj-stack > .oranj-card:first-child { flex: 1; }

/* Avatar + text rows inside cards */
.oranj-card.is-layout-flex { gap: 1.25rem; }
.oranj-card.is-layout-flex > .wp-block-group { flex: 1; margin: 0; max-width: none; }
.oranj-card.is-layout-flex > .wp-block-group > * { margin-left: 0; margin-right: 0; }

/* Tighter text rhythm inside linked cards */
.oranj-arrow > * { margin-block: 0; }
.oranj-arrow > * + * { margin-top: .35rem; }

/* Fluent Forms: match the soft, rounded look */
.fluentform .ff-el-form-control { border-radius: 14px; border: 1px solid var(--wp--preset--color--border-light); background: var(--wp--preset--color--tertiary); padding: .8rem 1rem; font-family: inherit; box-shadow: none; }
.fluentform .ff-el-form-control:focus { border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--base); }
.fluentform .ff-el-input--label label { font-weight: 500; font-size: .9rem; }
.fluentform .ff-btn-submit { background: var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--base) !important; border-radius: 999px !important; padding: .8em 1.8em !important; font-weight: 500; border: 0; }
.fluentform .ff-btn-submit:hover { opacity: .9; }

/* Vertical rhythm inside page sections (!important beats WordPress's layout margin resets) */
.oranj-section > .wp-block-columns, .oranj-section > .wp-block-group.oranj-card { margin-block: 2rem !important; }
.oranj-section > h2 { margin-top: 3rem !important; }
.oranj-card p + h3, .oranj-card ul + h3 { margin-top: 1.75rem; }
.oranj-section > .wp-block-quote { margin-block: 2rem !important; }
.oranj-section > :first-child { margin-top: 0 !important; }

/* Condition pages: content starts closer to the title banner */
.single-oranj_condition .wp-block-post-content > .oranj-section:first-child { padding-top: 2rem; }

/* Language switcher */
.oranj-lang { display: inline-flex; gap: .25rem; font-size: .8rem; font-weight: 600; background: var(--oranj-tint); border-radius: 999px; padding: .2rem; }
.oranj-lang a { padding: .3rem .65rem; border-radius: 999px; text-decoration: none; color: var(--wp--preset--color--primary); }
.oranj-lang a.is-current { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }

/* Header: keep one row. The Call button yields space to the nav + language switcher on mid-size screens. */
@media (max-width: 1380px) { .oranj-header .wp-block-buttons .is-style-outline { display: none; } }
.oranj-header .wp-block-navigation__container { gap: 1.1rem; }

/* Fluent Forms: states + extra field types */
.fluentform .ff-el-group { margin-bottom: 1.1rem; }
.fluentform select.ff-el-form-control { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B6652' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; }
.fluentform .ff-el-help-message { font-size: .82rem; color: var(--wp--preset--color--secondary); margin-top: .35rem; }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: #b3261e; background: #fff8f7; }
.fluentform .error.text-danger, .fluentform .ff-el-is-error .error { color: #b3261e; font-size: .85rem; margin-top: .3rem; }
.fluentform .ff-el-is-error .ff-el-form-control:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .14); }
.ff-message-success { background: var(--oranj-mint); border: 0 !important; border-radius: 18px; padding: 1.25rem 1.5rem !important; color: var(--wp--preset--color--primary-alt-accent); box-shadow: none; }
.ff-message-success p { margin: 0; }
.fluentform .ff-btn-submit[disabled], .fluentform .ff-btn-submit.disabled { opacity: .6; cursor: progress; }

/* Fluent Forms: error messages must never move the layout. If a field's error disappears on blur, the form
   used to jump up between mousedown and mouseup and swallow the click on Send. Errors now sit in reserved space. */
.fluentform .ff-el-group { margin-bottom: 1.95rem; }
.fluentform .ff-el-input--content, .fluentform .ff-t-cell { position: relative; }
.fluentform .ff-el-input--content .error, .fluentform .ff-t-cell .error { position: absolute; top: 100%; left: 0; margin: .25rem 0 0; line-height: 1.2; white-space: nowrap; }
.fluentform .ff-el-help-message { margin-bottom: .1rem; }

/* ---------- Mobile: action buttons are full width, equal, tall, and evenly spaced ----------
   (!important beats WordPress's per-block flex layout classes. Scoped to page content so the header and the
   sticky bottom bar keep their own layout.) */
@media (max-width: 781px) {
	.oranj-section .wp-block-buttons, .oranj-hero-wrap .wp-block-buttons { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: .8rem !important; margin-top: 1.6rem; width: 100%; }
	.oranj-section .wp-block-buttons > .wp-block-button, .oranj-hero-wrap .wp-block-buttons > .wp-block-button { width: 100% !important; flex: none !important; margin: 0 !important; }
	.oranj-section .wp-block-button__link, .oranj-hero-wrap .wp-block-button__link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.5rem; padding-block: .8em; font-size: 1.05rem; text-align: center; box-sizing: border-box; }
	/* "Meet Dr. G" card: avatar on top so its button can span the whole card instead of a narrow text column */
	.oranj-card--tint.is-layout-flex { flex-direction: column !important; align-items: stretch !important; gap: 1rem; }
	.oranj-card--tint.is-layout-flex > .oranj-avatar { align-self: flex-start; }
	/* Contact form: Send is a full-width target too */
	.fluentform .ff-btn-submit { width: 100%; min-height: 3.5rem; font-size: 1.05rem; }
}

/* =====================================================================================================
   COMUNIDAD LOOK. Overrides for the shared class hooks above. Warm, communal, bold and easy to read:
   cream paper, big colour bands with a paper grain, rounded type, hand-drawn flowers (CSS masks, so any colour).
   ===================================================================================================== */
body { -webkit-font-smoothing: antialiased; line-height: 1.6; }
h1, h2, h3, h4 { text-wrap: balance; }
::selection { background: var(--oranj-yellow); color: var(--oranj-ink); }

/* Type */
.oranj-title { font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
.oranj-hero-title { font-weight: 700; letter-spacing: -.03em; line-height: 1.04; font-size: clamp(2.6rem, 5.6vw, 4.5rem) !important; }
.oranj-hero-title strong { color: var(--oranj-yellow); font-weight: 700; }
.oranj-light-heading { font-weight: 700 !important; letter-spacing: -.025em; line-height: 1.1; }
.oranj-light-heading strong { font-weight: 700; color: var(--oranj-blue); }
.oranj-eyebrow { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; margin-bottom: .6rem; }
.oranj-eyebrow::before { display: none; }
.oranj-eyebrow--center { text-align: center; }

/* Colour bands: rounded blocks of colour with a fine paper grain */
.oranj-band { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--oranj-radius); color: #fff; }
.oranj-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--oranj-grain); opacity: .09; mix-blend-mode: multiply; }
.oranj-band--blue { background: var(--oranj-blue); }
.oranj-band--green { background: var(--oranj-green); }
.oranj-band--yellow { background: var(--oranj-yellow); color: var(--oranj-ink); }

/* Inner-page title banners (older patterns): butter paper, soft rounded bottom */
.oranj-glow { background: var(--wp--preset--color--tertiary); border-radius: 0 0 var(--oranj-radius) var(--oranj-radius); }
.oranj-glow::before { display: none; }

/* Header: cream, bold green nav, yellow Book Now */
.oranj-header { padding-top: 1rem; padding-bottom: 1rem; }
.oranj-header .wp-block-navigation { font-size: .98rem; font-weight: 700; }
.oranj-header .wp-block-navigation-item__content { color: var(--oranj-green); }
.oranj-header .wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid var(--oranj-green); }
.oranj-header-wrap::before { border-bottom: 0; }
.is-scrolled .oranj-header-wrap { box-shadow: 0 10px 26px -20px rgba(29, 74, 59, .6); }

/* Buttons: pills, bold. Yellow is the main call to action. */
.wp-block-button__link { font-weight: 700; }
.wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid currentColor; }
.oranj-link-btn .wp-block-button__link { background: transparent !important; box-shadow: none !important; padding: .3em 0; border-radius: 0; border-bottom: 2px solid currentColor; }
.oranj-link-btn .wp-block-button__link:hover { transform: none; opacity: .85; }
.oranj-btn-soft .wp-block-button__link { background: #fff; color: var(--oranj-green); border: 2px solid var(--oranj-green); }
.oranj-btn-mint .wp-block-button__link { background: var(--oranj-yellow); color: var(--oranj-ink); }

/* Language toggle: big, friendly pill */
.oranj-lang { display: inline-flex; gap: .15rem; background: #fff; border: 2px solid var(--oranj-green); border-radius: 999px; padding: .15rem; font-size: .95rem; font-weight: 700; letter-spacing: .02em; }
.oranj-lang a { padding: .4rem .95rem; min-width: 3rem; border-radius: 999px; color: var(--oranj-green); }
.oranj-lang a.is-current { background: var(--oranj-green); color: #fff; }
.oranj-lang a:not(.is-current):hover { background-color: var(--wp--preset--color--primary-accent); }

/* Cards */
.oranj-card { background: #fff; border: 0; box-shadow: var(--oranj-shadow); }
.oranj-card--tint { background: var(--wp--preset--color--tertiary); box-shadow: none; }
.oranj-card--mint { background: var(--wp--preset--color--primary-accent); box-shadow: none; }
.oranj-card--dark { background: var(--oranj-green); }
.oranj-chip { background: #fff; border: 2px solid var(--oranj-green); color: var(--oranj-green); font-weight: 700; }
.oranj-check li::before { background: var(--oranj-yellow); color: var(--oranj-ink); }

/* Hand-drawn flowers: line art painted through a mask, so each can take any colour */
.oranj-flora { --flora: var(--oranj-yellow); position: absolute; z-index: 2; margin: 0 !important; padding: 0; pointer-events: none; aspect-ratio: 1; background-color: var(--flora); transform: rotate(var(--r, 0deg)); transform-origin: 50% 60%;
	-webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.oranj-flora--yellow { --flora: var(--oranj-yellow); }
.oranj-flora--green { --flora: var(--oranj-green); }
.oranj-flora--cream { --flora: rgba(255, 249, 234, .9); }
.oranj-flora--marigold { --m: url("assets/illustrations/marigold.svg"); }
.oranj-flora--daisy { --m: url("assets/illustrations/daisy.svg"); }
.oranj-flora--sprig { --m: url("assets/illustrations/sprig.svg"); }
.oranj-flora--branch { --m: url("assets/illustrations/branch.svg"); }
.oranj-flora--blossom { --m: url("assets/illustrations/blossom.svg"); }
.oranj-flora--hero-a { width: 22%; left: -9%; top: 6%; --r: -14deg; }
.oranj-flora--hero-b { width: 27%; right: -5%; bottom: -7%; --r: 8deg; }
.oranj-flora--how-a { width: 40%; left: -7%; top: -13%; --r: -4deg; }
.oranj-flora--how-b { --flora: var(--wp--preset--color--terracotta); width: 25%; right: -5%; bottom: -8%; --r: 10deg; }
.oranj-flora--doc-a { width: 30%; right: -7%; top: -8%; --r: 12deg; }
.oranj-flora--voices-a { width: 150px; right: 5%; top: 1.5rem; --r: 14deg; opacity: .9; }

/* Photos: rounded, with flowers overlapping the edges */
.oranj-hero-photo { position: relative; margin: 0; }
.oranj-photo-round { margin: 0; }
.oranj-photo-round img { display: block; width: 100%; height: auto; border-radius: var(--oranj-radius); object-fit: cover; }
.oranj-hero-photo .oranj-photo-round img { aspect-ratio: 5 / 4; }
.oranj-hero-photo--how .oranj-photo-round img { aspect-ratio: 4 / 5; object-position: 58% 40%; }
.oranj-hero-photo--doctor .oranj-photo-round img { aspect-ratio: 1 / 1; object-position: 50% 20%; }
.oranj-float { background: #fff; backdrop-filter: none; border-radius: 16px; padding: .75rem 1.1rem; box-shadow: var(--oranj-shadow); color: var(--oranj-ink); }
.oranj-float strong { color: var(--oranj-green); font-weight: 700; }
.oranj-float--b { left: -5%; right: auto; top: auto; bottom: 9%; }

/* Hero (full-bleed blue) */
.oranj-hero-wrap.oranj-band { border-radius: 0; padding-top: clamp(2.2rem, 5vw, 4.5rem); padding-bottom: clamp(2.8rem, 6vw, 5.5rem); }
.oranj-hero-wrap .wp-block-columns { gap: clamp(2rem, 5vw, 4rem); }
.oranj-hero-wrap p.has-small-font-size { font-size: 1.12rem !important; line-height: 1.6; }

/* Pillars: green band, three short statements with line icons */
.oranj-pillars-wrap { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 0; }
.oranj-pillars { padding: clamp(1.8rem, 3.5vw, 2.8rem) 1rem; gap: 0; margin: 0; }
.oranj-pillar { padding: .5rem 1.5rem; }
.oranj-pillar + .oranj-pillar { border-left: 1px solid rgba(255, 249, 234, .5); }
.oranj-pillar h3 { margin: 0; font-weight: 700; line-height: 1.25; }
.oranj-ico { width: 52px; height: 52px; margin: 0 auto 1rem !important; background: #fff; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.oranj-ico--clock { --m: url("assets/illustrations/icon-clock.svg"); }
.oranj-ico--home { --m: url("assets/illustrations/icon-home.svg"); }
.oranj-ico--hands { --m: url("assets/illustrations/icon-hands.svg"); }
@media (max-width: 781px) {
	.oranj-pillar + .oranj-pillar { border-left: 0; border-top: 1px solid rgba(255, 249, 234, .5); margin-top: 1rem; padding-top: 1.5rem; }
}

/* How we care: numbered steps */
.oranj-step { gap: 1rem; margin-top: 1.9rem; align-items: flex-start; }
.oranj-step > .wp-block-group { flex: 1; margin: 0; max-width: none; }
.oranj-step > .wp-block-group > * { margin-left: 0; margin-right: 0; }
.oranj-step h3 { margin: .15rem 0 .45rem; font-weight: 700; }
.oranj-step p { margin: 0; }
.oranj-num { flex: 0 0 46px; width: 46px; height: 46px; margin: 0 !important; display: grid; place-items: center; border-radius: 50%; background: var(--oranj-blue); color: #fff; font-size: 1.25rem; font-weight: 700; }

/* Service tiles: bold colour blocks that cycle blue, yellow, green */
.oranj-tiles .wp-block-post-template { gap: 1.25rem; margin: 0; }
.oranj-tiles .oranj-arrow { border-radius: var(--oranj-radius); box-shadow: none; padding: 5.4rem 1.6rem 1.7rem; min-height: 100%; color: #fff; background: var(--oranj-blue); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.oranj-tiles .wp-block-post-template > li:nth-child(3n+2) .oranj-arrow { background: var(--oranj-yellow); color: var(--oranj-ink); }
.oranj-tiles .wp-block-post-template > li:nth-child(3n+3) .oranj-arrow { background: var(--oranj-green); color: #fff; }
.oranj-tiles .wp-block-post-template > li:nth-child(3n+1) .oranj-arrow { background: var(--oranj-blue); }
.oranj-tiles .oranj-arrow::before { left: 1.5rem; top: 1.5rem; transform: none; width: 50px; height: 50px; border-radius: 16px; background-color: #fff; background-size: 26px; }
.oranj-tiles .oranj-arrow::after { right: 1.5rem; top: 1.5rem; transform: none; width: 44px; height: 44px; background: transparent; border: 2px solid currentColor; color: inherit; }
.oranj-tiles .oranj-arrow:hover::after { background: #fff; color: var(--oranj-ink); transform: rotate(45deg); }
.oranj-tiles .oranj-arrow h3 { font-size: 1.3rem; font-weight: 700; margin: 0 0 .4rem; line-height: 1.2; }
.oranj-tiles .oranj-arrow a { color: inherit; }
.oranj-tiles .oranj-arrow p { color: inherit; font-size: .98rem; opacity: .95; }
.oranj-tiles .oranj-arrow:hover { transform: translateY(-5px); box-shadow: none; }

/* Doctor + visit bands */
.oranj-band.oranj-doctor, .oranj-band.oranj-visit { padding: clamp(1.8rem, 4vw, 3.5rem); gap: clamp(1.5rem, 4vw, 3.5rem); margin: 0; }
.oranj-doctor p { font-size: 1.12rem; line-height: 1.6; }
.oranj-visit .oranj-visit-card { padding: clamp(1.4rem, 2.5vw, 2rem); height: auto; }
.oranj-visit .oranj-visit-card h3 { margin-top: 0; }

/* Patient voices: green band, white quote cards */
.oranj-band.oranj-voices { border-radius: var(--oranj-radius) var(--oranj-radius) 0 0; padding-top: clamp(3rem, 6vw, 5rem); }
.oranj-voices .oranj-title { margin-bottom: 1.5rem; }
.oranj-slider .oranj-card.oranj-quote { background: #fff; padding: clamp(1.4rem, 2.5vw, 2rem); border: 0; }
.oranj-quote::before { content: "\201C"; display: block; font-size: 4.2rem; line-height: .7; height: 2.2rem; color: var(--oranj-green); font-weight: 700; }
.oranj-quote .wp-block-post-content { font-size: 1.02rem; line-height: 1.65; color: var(--wp--preset--color--secondary); }
.oranj-quote .wp-block-post-title { font-size: .92rem; color: var(--oranj-green); font-weight: 700; }
.oranj-slider-nav button { border-radius: 50%; background: var(--oranj-yellow); color: var(--oranj-ink); font-weight: 700; }
.oranj-slider-nav button:hover { background: #fff; color: var(--oranj-ink); }
.oranj-slider--light .oranj-slider-progress { background: rgba(255, 249, 234, .3); }
.oranj-slider--light .oranj-slider-progress > span { background: var(--oranj-yellow); }

/* Footer: nopal green with a faint marigold in the corner */
.oranj-footer { border-radius: var(--oranj-radius) var(--oranj-radius) 0 0; }
.oranj-footer::after { content: ""; position: absolute; z-index: -1; left: -30px; bottom: -40px; width: 260px; aspect-ratio: 1; background: rgba(255, 249, 234, .16); -webkit-mask: url("assets/illustrations/marigold.svg") center / contain no-repeat; mask: url("assets/illustrations/marigold.svg") center / contain no-repeat; }
.oranj-footer h3 { font-weight: 700; }
.oranj-footer a { color: var(--oranj-yellow); }
.oranj-footer a:hover { color: #fff; }

/* Forms */
.fluentform .ff-btn-submit { background: var(--oranj-yellow) !important; color: var(--oranj-ink) !important; font-weight: 700; }
.fluentform .ff-el-input--label label { font-weight: 700; }
.fluentform .ff-el-form-control:focus { box-shadow: 0 0 0 4px rgba(63, 91, 181, .2) !important; border-color: var(--oranj-blue); }

@media (max-width: 781px) {
	.oranj-hero-wrap.oranj-band { padding-top: 1.6rem; }
	.oranj-hero-photo { margin-top: .5rem; }
	.oranj-flora--hero-a { width: 26%; left: -3%; top: 2%; }
	.oranj-flora--hero-b { width: 30%; right: -3%; bottom: -5%; }
	.oranj-flora--how-a { left: -2%; top: -9%; }
	.oranj-flora--how-b { right: -2%; }
	.oranj-flora--doc-a { right: -3%; top: -6%; }
	.oranj-flora--voices-a { width: 90px; right: 4%; top: 1rem; }
	.oranj-lang { font-size: .85rem; }
	.oranj-lang a { padding: .35rem .7rem; min-width: 2.6rem; }
	.oranj-band.oranj-doctor, .oranj-band.oranj-visit { margin-left: 0; margin-right: 0; }
}

/* Motion (extends motion.css; only when the visitor allows it) */
@media (prefers-reduced-motion: no-preference) {
	@keyframes oranj-sway { 0%, 100% { transform: rotate(var(--r, 0deg)); } 50% { transform: rotate(calc(var(--r, 0deg) + 5deg)); } }
	.oranj-flora { animation: oranj-sway 9s ease-in-out infinite; }
	.oranj-flora--daisy, .oranj-flora--branch { animation-duration: 11s; animation-direction: reverse; }
	.oranj-hero-photo .oranj-photo-round { animation: oranj-rise 1s .2s cubic-bezier(.2, .8, .2, 1) backwards; }
	.oranj-hero-photo .oranj-flora { animation: oranj-pop .7s .9s cubic-bezier(.2, .8, .2, 1) backwards, oranj-sway 9s 1.6s ease-in-out infinite; }
}

/* Polish */
.oranj-pillars { align-items: stretch; }
.oranj-pillar { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.oranj-footer::after { left: -70px; bottom: -110px; width: 280px; }

/* Inner pages */
.oranj-card--dark .oranj-light-heading strong, .oranj-band--green .oranj-light-heading strong, .oranj-band--blue .oranj-light-heading strong { color: var(--oranj-yellow); }
.oranj-card--dark p { color: #fff; }
.oranj-card p + h2, .oranj-card p + h3, .oranj-card ul + h3 { margin-top: 1.75rem !important; }
.oranj-hero-visual::before { background: var(--oranj-blue); }
.oranj-hero-visual::after { content: ""; position: absolute; z-index: 1; right: 4%; top: 8%; width: 26%; aspect-ratio: 1; background: var(--oranj-yellow); -webkit-mask: url("assets/illustrations/daisy.svg") center / contain no-repeat; mask: url("assets/illustrations/daisy.svg") center / contain no-repeat; pointer-events: none; }
.oranj-hero-visual { overflow: visible; }
.oranj-hero-wrap.oranj-glow { overflow: hidden; }

/* Contact form: one consistent field style */
.fluentform .ff-el-group .ff-el-form-control, .fluentform .ff-el-input--content input.ff-el-form-control, .fluentform .ff-el-input--content textarea.ff-el-form-control, .fluentform .ff-el-input--content select.ff-el-form-control { background-color: #fff; border: 2px solid var(--wp--preset--color--main-accent); border-radius: 14px; box-shadow: none; }
.fluentform .ff-el-group .ff-el-form-control:hover { border-color: var(--wp--preset--color--border-dark); }
.fluentform .ff-el-group .ff-el-form-control:focus { border-color: var(--oranj-blue); }

/* Mobile menu: cream panel, big friendly green links */
.wp-block-navigation__responsive-container.is-menu-open { background-color: var(--oranj-cream) !important; color: var(--oranj-green) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--oranj-green); font-size: 1.5rem; font-weight: 700; padding: .7rem 1rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current] { background: var(--oranj-yellow) !important; color: var(--oranj-ink); border-radius: 14px; }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { background: var(--oranj-yellow); color: var(--oranj-ink); border-radius: 12px; padding: 6px; }