:root {
  /* Standard border radius */
  --arc-border-radius: 14px;
}

.tbw-arc-rtl .arc-entry-header,
.tbw-arc-rtl .arc-lens-current,
.tbw-arc-rtl .arc-lens-current p,
.tbw-arc-rtl .arc-lens-current li,
.tbw-arc-rtl .arc-lens-current h1,
.tbw-arc-rtl .arc-lens-current h2,
.tbw-arc-rtl .arc-lens-current h3,
.tbw-arc-rtl .arc-lens-current .arc-data-meta,
.tbw-arc-rtl .arc-lens-current .arc-data-tags {
	text-align: right;
}

.tbw-arc-rtl {
	scrollbar-gutter: stable both-edges;
	overflow-y: scroll;
}

/* ================================
   DIAL ROOT + GENERIC SKIN LAYER
   ================================ */

#arc-lens-dial-root {
  margin-bottom: 1rem;
  /* Page background color for the current skin (stone); updated by skin selector later. */
/* 
  --arc-notch-bg: inherit;
 */
}

/* Make the skin container hug the dial and clip to a circle */
#arc-lens-dial-root.arc-lens-skin {
  position: relative;
  display: block;
  width: min(100%, 500px);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 999px;
  overflow: hidden;
  line-height: 0;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure the SVG sits above any background and fills the frame */
#arc-lens-dial-root.arc-lens-skin > svg,
#arc-lens-dial-root.arc-lens-skin > .arc-lens-dial-svg {
  position: relative;
  z-index: auto;
  display: block;
  width: 100%;
  height: auto;
}

#arc-lens-dial-svg .arc-lens-wedge,
#arc-lens-dial-svg .arc-lens-cue {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

/* etched effect hooks (defaults off) */
#arc-lens-dial-svg .arc-lens-wedge,
#arc-lens-dial-svg .arc-lens-label,
#arc-lens-dial-svg .arc-lens-coming,
#arc-lens-dial-svg .arc-lens-cue {
  filter: var(--arc-dial-etch-filter, none);
}

#arc-lens-dial-svg .arc-lens-label { fill: var(--arc-dial-label, currentColor); }
#arc-lens-dial-svg .is-disabled .arc-lens-label { fill: var(--arc-dial-label-disabled, #aaa); }
#arc-lens-dial-svg .arc-lens-coming { fill: var(--arc-dial-coming, #aaa); }
#arc-lens-dial-svg .arc-lens-cue { stroke: var(--arc-dial-cue, #000); }


/* ================================
   SVG SIZING
   ================================ */

#arc-lens-dial-svg {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
  height: auto;
}

/* Optional future background ring (keep only if used) */
.arc-lens-dial-bg {
  fill: none;
  stroke: #ddd;
  stroke-width: 2;
}

/* Disable interactions */
#arc-lens-dial-svg .arc-lens-segment.is-disabled {
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

/* ================================
   KEYBOARD FOCUS (distinct)
   ================================ */

#arc-lens-dial-svg .arc-lens-segment:focus {
  outline: none;
}

#arc-lens-dial-svg .arc-lens-segment:focus-visible .arc-lens-wedge {
  stroke: var(--arc-dial-stroke-active, #000);
  stroke-width: 3.2;
  fill: var(--arc-dial-fill-focus, rgba(0, 0, 0, 0.06));
  fill-opacity: 1;
}

#arc-lens-dial-svg .arc-lens-segment:focus-visible .arc-lens-label {
  font-weight: 600;
}

/* Disabled lenses should not “light up” on focus */
#arc-lens-dial-svg .arc-lens-segment.is-disabled:focus-visible .arc-lens-wedge {
  stroke: var(--arc-dial-stroke-disabled, #aaa);
  stroke-width: 2;
  fill-opacity: 0;
}

#arc-lens-dial-svg .arc-lens-segment.is-disabled:focus-visible .arc-lens-label {
  font-weight: 450;
}

/* ================================
   LABEL
   ================================ */

#arc-lens-dial-svg .arc-lens-segment .arc-lens-label {
  font-family: var(--arc-dial-label-font);
  font-weight: 500;
  fill: var(--arc-dial-label, currentColor);
  cursor: pointer;
  user-select: none;
  transition: opacity 180ms ease, font-weight 180ms ease;
}

#arc-lens-dial-svg .arc-lens-label-curved textPath {
  font-family: var(--arc-dial-label-font);
}

#arc-lens-dial-svg .arc-lens-segment:hover .arc-lens-label {
  font-weight: 600;
}

#arc-lens-dial-svg .arc-lens-segment.is-active .arc-lens-label {
  font-weight: 650;
}

#arc-lens-dial-svg .arc-lens-segment.is-disabled .arc-lens-label {
  fill: var(--arc-dial-label-disabled, #aaa);
  cursor: default;
  font-weight: 450;
}

/* "coming soon" */
#arc-lens-dial-svg .arc-lens-segment .arc-lens-coming {
  display: none;
  font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 450;
  fill: var(--arc-dial-coming, #aaa);
  opacity: 0.9;
  pointer-events: none;
}

#arc-lens-dial-svg .arc-lens-segment.is-disabled .arc-lens-coming {
  display: block;
}

/* ================================
   WEDGE
   ================================ */

#arc-lens-dial-svg .arc-lens-segment .arc-lens-wedge {
  fill: #000;                 /* keep fill defined so opacity works consistently */
  fill-opacity: 0;            /* “empty” at rest */
  stroke: var(--arc-dial-stroke, #555);
  stroke-width: var(--arc-dial-stroke-width, 2);
  transition: fill-opacity 180ms ease, stroke-width 180ms ease, stroke 180ms ease;
}

#arc-lens-dial-svg .arc-lens-segment:hover .arc-lens-wedge {
  fill-opacity: 1;
  fill: var(--arc-dial-fill-hover, rgba(0, 0, 0, 0.04));
  stroke-width: var(--arc-dial-stroke-width-hover, 3);
}

#arc-lens-dial-svg .arc-lens-segment.is-active .arc-lens-wedge {
  fill-opacity: 1;
  fill: var(--arc-dial-fill-active, rgba(0, 0, 0, 0.08));
  stroke: var(--arc-dial-stroke-active, #000);
  stroke-width: var(--arc-dial-stroke-width-active, 3.2);
}

/* ================================
   CANDIDATE (nearest-to-12 during motion)
   Shows only while dragging/animating; should be subtler than active.
   ================================ */

#arc-lens-dial-svg .arc-lens-segment.is-candidate .arc-lens-wedge {
  fill-opacity: 1;
  fill: var(--arc-dial-fill-candidate, rgba(0, 0, 0, 0.06));
  stroke: var(--arc-dial-stroke-candidate, var(--arc-dial-stroke-active, #000));
  stroke-width: var(--arc-dial-stroke-width-candidate, 3);
}

/* Candidate label gets a tiny lift (less than active) */
#arc-lens-dial-svg .arc-lens-segment.is-candidate .arc-lens-label {
  font-weight: 600;
}

/* Candidate cue: optional, but keep very subtle (off by default) */
#arc-lens-dial-svg .arc-lens-segment.is-candidate .arc-lens-cue {
  opacity: 0.25;
}

/* Disabled always wins */
#arc-lens-dial-svg .arc-lens-segment.is-disabled.is-candidate .arc-lens-wedge,
#arc-lens-dial-svg .arc-lens-segment.is-disabled.is-candidate .arc-lens-label,
#arc-lens-dial-svg .arc-lens-segment.is-disabled.is-candidate .arc-lens-cue {
  /* don’t let candidate styling sneak onto disabled */
  opacity: unset;
}

#arc-lens-dial-svg .arc-lens-segment.is-disabled .arc-lens-wedge {
  fill-opacity: 0;
  stroke: var(--arc-dial-stroke-disabled, #aaa);
  stroke-width: 2;
}

/* ================================
   ACTIVE CUE (tick) — keep subtle
   ================================ */

#arc-lens-dial-svg .arc-lens-segment .arc-lens-cue {
  stroke: var(--arc-dial-cue, rgba(0, 0, 0, 0.65));
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

#arc-lens-dial-svg .arc-lens-segment.is-active .arc-lens-cue {
  opacity: 0.65;
}

/* Disabled beats everything */
#arc-lens-dial-svg .arc-lens-segment.is-disabled .arc-lens-cue {
  opacity: 0;
}

/* ================================
   LENS WORLD CONTAINERS
   ================================ */

.arc-lens-world {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  margin: 0 auto;
  max-width: 800px;
  text-align: left;
}
.tbw-arc-rtl .arc-lens-world {
  text-align: right !important;
}

.arc-lens-world.is-active {
  display: block;
  opacity: 1;
}

.arc-lens-world[aria-hidden="true"] { visibility: hidden; }
.arc-lens-world[aria-hidden="false"] { visibility: visible; }

/* Wrapper */
#arc-lens-dial-demo {
/* 
  max-width: 800px;
 */
  margin: 0 auto 1rem auto;
  text-align: center;
}

.arc-lens-home {
	display: none;
}

.arc-lens-home.is-active {
	display: block;
}

/* ================================
   DRAGGING
   ================================ */

/* Prevent scroll/selection weirdness during drag */
#arc-lens-dial-root.is-dragging {
  cursor: grabbing;
}

#arc-lens-dial-root .arc-lens-dial-svg,
#arc-lens-dial-root #arc-lens-dial-svg {
  touch-action: none;
  user-select: none;
}

/* ================================
   NOTCH
   ================================ */

.arc-orient-notch{
  fill: var(--arc-notch-bg, #fff);
  opacity: 0;
  pointer-events: none;

  /* smoother + calmer */
  transition: opacity 320ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity;
}

.arc-orient-notch.is-visible{
  opacity: 1; /* reduce to make more subtle */
}

/* ================================
   v0.9.0 Labels: legacy vs curved
   ================================ */

/* Legacy (straight) labels: keep visible but clearly secondary */
#arc-lens-dial-svg .arc-lens-dial-labels .arc-lens-label,
#arc-lens-dial-svg text.arc-lens-label[id^="label-"] {
  opacity: 0.28;
  filter: saturate(0.85);
}

/* If a legacy label is inside an active wedge, give it a tiny bump (optional) */
#arc-lens-dial-svg .arc-lens-segment.is-active text.arc-lens-label[id^="label-"] {
  opacity: 0.40;
}

/* Curved labels: primary */
#arc-lens-dial-svg .arc-lens-label-curved {
  opacity: 1;
/* 
  font-size: 60px;
 */
  font-weight: 650; /* slightly stronger than base */
}


#arc-lens-dial-svg .arc-lens-label-curved textPath{
  letter-spacing: var(--arc-label-spacing, 0.05em);
}
#arc-lens-dial-svg .arc-lens-label-curved.convex textPath{
  letter-spacing: var(--arc-label-spacing, 0.05em);
}
#arc-lens-dial-svg .arc-lens-label-curved.concave textPath {
  letter-spacing: var(--arc-label-spacing-concave, -0.05em);
}


/* Curved labels respond subtly to active/candidate state */
#arc-lens-dial-svg .arc-lens-segment.is-candidate .arc-lens-label-curved {
  opacity: 1;
}

#arc-lens-dial-svg .arc-lens-segment.is-active .arc-lens-label-curved {
  opacity: 1;
}

/* ============================================================
   Label stack crossfade — force correct visibility
   ============================================================ */

/* Default state: show concave, hide convex */
#arc-lens-dial-svg .arc-lens-segment .arc-label-stack text.label-concave {
  opacity: 1 !important;
}
#arc-lens-dial-svg .arc-lens-segment .arc-label-stack text.label-convex {
  opacity: 0 !important;
}

/* When segment is in convex mode: swap */
#arc-lens-dial-svg .arc-lens-segment.is-label-convex .arc-label-stack text.label-concave {
  opacity: 0 !important;
}
#arc-lens-dial-svg .arc-lens-segment.is-label-convex .arc-label-stack text.label-convex {
  opacity: 1 !important;
}

/* Smoothness */
#arc-lens-dial-svg .arc-lens-segment .arc-label-stack text.label-concave,
#arc-lens-dial-svg .arc-lens-segment .arc-label-stack text.label-convex {
  transition: opacity 180ms ease;
}


/* Disabled segments: dim ONLY the currently-visible label layer (preserve crossfade) */
#arc-lens-dial-svg .arc-lens-segment.is-disabled .arc-label-stack text.label-concave {
  opacity: 0.55 !important; /* readable but clearly disabled */
}
#arc-lens-dial-svg .arc-lens-segment.is-disabled .arc-label-stack text.label-convex {
  opacity: 0 !important; /* keep hidden unless convex mode */
}

#arc-lens-dial-svg .arc-lens-segment.is-disabled.is-label-convex .arc-label-stack text.label-concave {
  opacity: 0 !important;
}
#arc-lens-dial-svg .arc-lens-segment.is-disabled.is-label-convex .arc-label-stack text.label-convex {
  opacity: 0.55 !important;
}

/* thumbnails for selecting skins */

.arc-dial-utilitybar {
	border-radius: var(--arc-border-radius);
	padding: 0.85rem 0.9rem 0.9rem;
	border: 2px solid rgba(255,255,255,0.35);
}

.arc-dial-utilitybar.arc-cityscape-utilitybar {
	border: 1px solid rgba(0,0,0,0.12);
	padding: 0.8rem 0.8rem 0.8rem;
}

.arc-dial-utilitybar.arc-cityscape-utilitybar .aop-context-toggle {
	margin-top: 0 !important;
	gap: 6px;
}

.arc-dial-utilitybar.arc-cityscape-utilitybar .aop-context-toggle__switch {
	height: 20px;
}

.arc-dial-utilitybar.arc-cityscape-utilitybar .aop-context-toggle__label {
	color: #000;
	opacity: 1;
	font-weight: 400;
}

.arc-dial-utilitybar .arc-images-captions-toggle {
	margin-top: 0 !important;
}

.arc-dial-utilitybar .arc-images-captions-toggle {
	gap: 6px;
}

.arc-dial-utilitybar .arc-images-captions-toggle .aop-context-toggle__switch {
	height: 20px;
}

.arc-dial-utilitybar .arc-images-captions-toggle {
	border-color: rgba(255,255,255,0.35) !important;
	background: transparent;
}

.arc-dial-utilitybar .arc-images-captions-toggle .aop-context-toggle__label {
	color: #000;
	opacity: 1;
	font-weight: 400;
}

.arc-dial-utilitybar .arc-images-captions-toggle:has(
	.aop-context-toggle__switch[aria-pressed="true"]
) {
	border-color: rgba(0,0,0,0.25) !important;
	background: rgba(255,255,255,0.25);
}

.arc-skin-switcher{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:flex-start;
}

.arc-skin-thumb{
	appearance:none;
	border: 2px solid rgba(255,255,255,0.35);
	border-radius: var(--arc-border-radius);
	background: transparent;
	padding:6px;
	cursor:pointer;
	display:flex;
	flex-direction:column;
	gap:6px;
	align-items:center;
}

.arc-skin-thumb img{
  width:54px;
  height:20px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}

.arc-skin-thumb-label{
  font-size:12px;
  line-height:1;
}

.arc-skin-thumb.is-active{
	border-color: rgba(0,0,0,0.25);
	background:rgba(255,255,255,0.25);
}

@media (max-width: 600px) {
	.arc-dial-utilitybar {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.35rem;
		max-width: 100%;
	}

	.arc-lang-switcher,
	.arc-skin-switcher {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.tbw-arc-rtl .arc-dial-utilitybar {
		align-items: flex-start;
	}

	.tbw-arc-rtl .arc-lang-switcher,
	.tbw-arc-rtl .arc-skin-switcher {
		justify-content: flex-start;
	}
}

/* Two-column frame */
.arc-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  grid-template-rows: auto 1fr;
  gap: 1.25rem;
  padding: 18px 24px 28px;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 14px;
  position: relative;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.arc-two-col > .arc-entry-header {
	text-align: left;
}
.tbw-arc-rtl .arc-two-col > .arc-entry-header {
	text-align: right !important;
}

/* Header spans both columns on row 1 */
.arc-two-col > .arc-entry-header {
  grid-column: 1 / -1;
  grid-row: 1;
}

/* Content column sits in row 2, col 1 */
.arc-two-col > .arc-col-content {
  grid-column: 1;
  grid-row: 2;
}

/* Dial column sits in row 2, col 2 */
.arc-two-col > .arc-col-dial {
  grid-column: 2;
  grid-row: 2;
}

.arc-col-dial{
  position: sticky;
  top: 18px;
}

.arc-col-dial{
  width: 100%;
  max-width: 460px;
}

#arc-lens-dial-svg{
  width: 100%;
  max-width: 500px;
  height: auto;
}

/* Regular desktop / laptop widths */
@media (max-width: 1280px){
  .arc-col-dial{
    max-width: 400px;
  }

  .arc-col-dial #arc-lens-dial-root,
  .arc-col-dial #arc-lens-dial-svg{
    max-width: 400px !important;
  }
}

/* Mobile */
@media (max-width: 980px){
  .arc-col-dial{
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .arc-col-dial #arc-lens-dial-root,
  .arc-col-dial #arc-lens-dial-svg{
    max-width: 360px !important;
  }
}


@media (max-width: 980px){
  .arc-two-col{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .arc-two-col > .arc-entry-header{
    grid-column: 1;
    grid-row: 1;
  }

  .arc-two-col > .arc-col-dial{
    grid-column: 1;
    grid-row: 2;
    position: static;
    max-width: none;
    margin-top: 0;
  }

  .arc-two-col > .arc-col-content{
    grid-column: 1;
    grid-row: 3;
    margin-top: 0;
  }
}

/* 1) Let the dial column and its children shrink without clipping */
.arc-col-dial,
.arc-col-dial * {
  box-sizing: border-box;
}

/* 2) Common wrappers in your markup: force them to be fluid */
.arc-col-dial #arc-lens-dial-root {
  width: 100% !important;
  max-width: 500px !important;
  overflow: visible !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;  /* neutralize odd positioning */
  left: auto !important;
  right: auto !important;
}

/* 3) Force the SVG to actually fit the wrapper */
.arc-col-dial #arc-lens-dial-svg {
  width: 100% !important;
  height: auto !important;
  max-width: 500px !important;
  display: block !important;
  overflow: visible !important;
  margin: 0 auto !important;
  transform: none !important;
}

.arc-two-col {
  grid-template-rows: auto auto;
}

@media (min-width: 981px){
  .arc-two-col > .arc-col-content,
  .arc-two-col > .arc-col-dial {
    grid-row: 2;
    z-index: 1;
    margin-top: -40px;
  }
}

.tbw-arc-title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -.5px;
	text-decoration: none;
}


/* ==========================================
   Stylized Arc title
========================================== */

.tbw-arc-title {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	text-decoration: none;
	line-height: 1;
	flex-wrap: nowrap;
}

/* Main word */

.arc-title-main {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	color: #000;
	white-space: nowrap;
	text-transform: lowercase;
}

/* Small connector word */

.arc-title-link {
	font-family: "Papyrus", fantasy;
	font-size: 1.1rem;
	font-weight: 400;
	color: #b82d02;
	line-height: 1;
	display: inline-flex;
	align-items: flex-end;
	padding-top: 0.5rem;
	white-space: nowrap;
	text-transform: lowercase;
}
/* Emphasized phrase */

.arc-title-emphasis {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	background: #000;
	color: #fff;
	padding: 0.14rem 0.38rem 0.18rem;
	border-radius: 0.08rem;
	line-height: 1;
	white-space: nowrap;
	text-transform: lowercase;
}
.tbw-skin-stone .arc-title-emphasis {
	color: rgb(235, 185, 159);
}
.tbw-skin-textile .arc-title-emphasis {
	color: rgb(222, 204, 145);
}

/* RTL handling */

.tbw-arc-title-rtl {
	direction: rtl;
}

/* Arabic adjustments */

.tbw-arc-title-rtl .arc-title-main {
	font-size: 1rem;
	text-transform: none;
}

.tbw-arc-title-rtl .arc-title-emphasis {
	font-size: 1rem;
	text-transform: none;
}

/* DIAL LABEL SIZES PER LANGUAGE */

/* Default */
.arc-lens-dial-root .arc-lens-dial-svg .arc-lens-segment .arc-lens-label {
	font-size: 60px;
}

/* EN */
.arc-lens-dial-root.is-lang-en .arc-lens-dial-svg .arc-lens-segment .arc-lens-label {
	font-size: 60px;
}

/* ES */
.arc-lens-dial-root.is-lang-es .arc-lens-dial-svg .arc-lens-segment .arc-lens-label {
	font-size: 56px;
}
.tbw-skin-stone .arc-lens-dial-root.is-lang-es .arc-lens-dial-svg .arc-lens-segment .arc-lens-label {
	font-size: 44px;
}

/* PT */
.arc-lens-dial-root.is-lang-pt .arc-lens-dial-svg .arc-lens-segment .arc-lens-label {
	font-size: 60px;
}
.tbw-skin-stone .arc-lens-dial-root.is-lang-pt .arc-lens-dial-svg .arc-lens-segment .arc-lens-label {
	font-size: 44px;
}

/* AR */
.arc-lens-dial-root.is-lang-ar .arc-lens-dial-svg .arc-lens-segment .arc-lens-label {
	font-size: 50px;
}
.tbw-skin-stone .arc-lens-dial-root.is-lang-ar .arc-lens-dial-svg .arc-lens-segment .arc-lens-label {
	font-size: 40px;
}

@media (max-width: 980px){
  .arc-col-dial {
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .arc-col-dial #arc-lens-dial-root.arc-lens-skin {
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto;
    margin-right: auto;
  }

  .arc-col-dial #arc-lens-dial-svg,
  .arc-col-dial #arc-lens-dial-root.arc-lens-skin > svg,
  .arc-col-dial #arc-lens-dial-root.arc-lens-skin > .arc-lens-dial-svg {
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
  }
}

main {
	margin-top: var(--wp--preset--spacing--30) !important;
}
@media (max-width: 1150px){
	main {
		margin-top: var(--wp--preset--spacing--30) !important;
	}
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	z-index: 999;
}

@media (max-width: 780px) {
	.arc-cityscape-utilitybar {
		display: none !important;
	}
}

@media (max-width: 780px) {
	.arc-dial-utilitybar .arc-images-captions-toggle:not([hidden]) {
		display: inline-flex !important;
	}
}